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@ 集结 CSS 实 战 心得 ， 助 你 突破 技术 瓶颈 ， 
成 功 进 阶 CSS 高 手 


@ 分 步 讲 解 技 术 特 性 ， 结 合 丰富 示例 ， 
让 Web 开 发 得 心 应 手 


@ 亚马逊 五 星 好 评 ， 
读者 口碑 相传 的 CSS 宝 典 
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作者 简介 


基 思 . J. 格 兰 特 (Keith J. Grant ) 


高 级 Web 开 发 人 员 ， 现 任职 于 美国 
洲际 交易 所 ， 负 责编 写 和 维护 合作 站 
点 的 CSS， 客 户 包括 纽约 证 券 交 易 
所 网 站 等 。 在 使 用 HTML、CSS 和 
JavaScript 开 发 和 维护 Web 站 点 及 
应 用 程序 方面 具有 丰富 的 经 验 。 
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毕业 于 华中 科技 大 学 计算 机 学 院 。 曾 
任 奇 虎 360 软件 开发 工程 师 ， 多 年 
Web 从业 者。 参与 翻译 了 《高 性 能 
HTML5》《 移 动 Web 手 册 》《 大 型 
JavaScript 应 用 最 佳 实践 指南 》 
《Web 开 发 权威 指南 》 等 书 。 


高 楠 

多 年 Web 开 发 经 验 ， 自 由 译 者 ， 开 
源 硬件 爱好 者 。 目 前 束 职 于 360 奇 
舞 团 。 


效 字 版权 巨 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 5 全 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 
和 党 悟 ， 与 我 们 共同 保护 基 识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 尸 实 施 包 括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 退 究 法 律 
贡 任 。 
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内 容 提 要 
本 书 旨 在 达成 两 个 目标 : 帮 读 者 次 度 营 握 CSS 语言 ， 并 快速 了 解 CSS 的 新 进展 和 新 特性 。 本 书 分 为 
以 下 四 部 分 。 第 一 部 分 回顾 基础 知识 ， 并 重点 关注 几 个 很 容易 被 忽视 的 细 记 ， 包 括 层 琶 和 继承 、 相 对 单位 、 
盒 模型 等 ; 第 二 部 分 介绍 网 页 布局 的 各 种 关键 工具 ， 如 浮动 布局 、Flexbox、 网 格 布局 、 定 位 、 啊 应 式 设 计 
等 ; 第 三 部 分 介绍 新 的 最 佳 实践 ， 主 要 包括 如 何 用 模块 化 的 方式 组 织 CSS， 以 及 如 何 构 建 一 个 模式 库 ; 第 
四 部 分 介绍 与 设计 师 共 事 时 需要 考虑 哪些 重要 因 系 ， 以 及 目 己 如 何 做 一 点 设计 工作 。 
本 书 适 合 前 端 工程 师 及 Web 开发 人 员 阅 读 。 
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模型 和 border-box 


侈 模型 指 的 是 网 页 元 系 的 结构 。 当 指定 一 个 元 双 的 完 度 或 高 度 时 , 便 设 置 了 元 条 内 容 的 尺寸 一 一 
任何 内 边 距 (padding )、 边 框 ( border )、 外 边 距 ( margin ) 都 会 基于 它 车 加 。 











给 元 素 设 置 pox-sizing: porder-box 会 改变 盒 模型 ， 使 其 获得 更 好 的 可 预测 性 。 指 定 宽 
度 或 高 度 时 ， 会 设置 整个 元 素 尺寸 ， 包括 内 边 距 和 边框 。 


C 





第 3 章 介 绍 如 何 给 整个 网 页 设置 border-box, 以 及 其 他 重要 概念 ， 如 : 
口 让 内 容 居中 

口 创建 等 高 列 

口 控制 元 系 的 间距 


译 者 厅 





作为 有 多 年 工作 经 验 的 前 端 开 发 者 , 我 深切 地 体会 到 CSS 的 重要 性 , 同时 也 感受 到 精通 CSS 
的 难度 之 高 。CSS 的 世界 过 于 庞大 ， 而 且 近 几 年 消 现 的 新 特性 越 来 越 多 。 虽 然 初 学 者 可 以 快速 上 
手 CSS， 但 是 要 达到 精通 的 境界 则 需要 投入 大 量 的 时 间 。 

而 我 正 是 因为 工作 方面 遇 到 了 和 急需 解决 的 问题 , 无 意 中 接 触 到 了 本 书 。 我 原本 只 是 想 随便 翻 
开 看 看 ， 没 想到 一 翻 开 就 合 不 上 了 ， 书 中 不 仅 解 答 了 我 原 有 的 疑惑 ， 还 大 大 地 拓展 了 我 的 视野 。 
我 想 ， 这 么 好 的 书 ， 应 该 让 更 多 人 看 到 ， 于 是 便 有 了 翻译 此 书 的 念 涉 。 由 于 工作 实在 繁忙 , 便 拉 
上 目 己 的 同事 高 楠 一 起 翻 幸 。 我 翻译 了 友 言 、 前 言 、 任 谢 、 关 于 本 书 、 第 1 ~ 8 章 及 附录 A， 凯 
楠 翻译 了 第 9 ~ 16 章 及 附录 B。 

言 归 正 传 ， 回 到 本 书 。 本 书 作者 在 CSS 这 一 概念 提出 之 初 ， 就 已 经 日 学 了 HTML 和 CSS 的 
相关 知识 。 他 对 前 端 和 后 端的 工作 都 十 分 了 解 ， 并 拥有 十 余年 CSS 实战 经 验 。 在 就 职 过 的 每 一 
家 公司 ， 他 都 是 非常 重要 的 CSS 导师 。 对 于 想 要 精通 CSS 的 人 而 言 ， 本 书 就 是 一 张 宝 贯 的 “地 
图 ”"。 本 书 履 盖 了 CSS 世界 的 大 部 分 “疆土 "， 从 CSS 基础 知识 开始 〈 如 层 琶 、 优 先 级 、 继 承 、 
相对 单位 、 盒 模型 等 )， 到 多 种 布局 (如 浮动 布局 、Flexbox 、 网 格 布局 、 啊 应 式 设 计 等 )， 再 到 
大 型 应 用 程序 中 的 CSS( 如 模块 化 CSS 和 模式 库 )， 最 后 是 关于 CSS 的 高 级 话题 ( 如 人 背景、 阴影 
和 混合 模式 ， 对 比 、 颜 色 和 间距 ， 以 及 排 上 有 版、 过渡、 变换 、 动 画 等 )。 

不 管 你 是 CSS 新 手 ， 还 是 有 一 定 基 础 ， 但 在 CSS 领域 遇 到 了 瓶颈 的 开发 人 员 ， 你 都 可 以 从 
本 书 中 获 益 。 本 书 不 仅 有 讲解 透彻 的 文字 介绍 , 而 且 还 有 详细 的 分 步 示例 , 手把手 教 你 学 习 CSS。 
本 书 图 文 并 茂 ， 帮 助 你 用 科学 的 方法 进行 CSS 实战 训练 ， 将 理论 融入 实践 ， 达 到 事半功倍 的 学 
习 效 果 。 

最 后 ， 巾 于 译 者 水 平 有 限 ， 难 免 会 有 翻译 不 当 之 处 。 如 有 问题 ， 欢 迎 读者 批评 指正 。 同 时 感 
谢 人 民 邮 电 出 版 社 图 灵 公 司 的 领导 和 编辑 们 ， 他 们 为 本 书 的 出 版 付出 了 宝 喧 的 时 间 和 精力 。 
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“只 需 一 分 钟 就 能 学 会 ， 却 要 用 一 幸子 的 时 间 去 精通 ”， 这 侣 话 现在 略 显 老 侠 , 但 我 还 是 很 达 
欢 。 这 人 句 话 在 现代 作为 《 黑 日 棋 》( Othello ) 游戏 的 标语 而 得 到 普及 。 在 《黑白 棋 》》 游 戏 中 ， 玩 





























在 中 间 ， 那 么 所 有 黑 棋 将 被 蔡 换 为 白 棋 ， 整 行 棋子 就 变 成 了 昌 色 。 

就 像 黑 白 棋 一 样 ， 学 会 CSS 的 规则 并 不 难 。 你 只 需要 写 一 个 选择 顺和 尝试 匹配 元 素 ， 然 后 写 
一 些 键 / 值 对 给 元 素 添加 样式 即 可 。 即 使 是 新 手 也 能 轻松 理解 该 基础 语法 。 但 要 精通 CSS， 难 在 
需要 知道 在 何 时 做 何事 。 

CSS 是 一 种 Web 语言 ， 但 是 它 与 编程 并 不 完全 相同 。CSS 也 包含 一 些 逻 辑 和 循环 ， 但 它 的 
数学 仅 限 于 简单 的 图 数 ， 并 且 下 到 最 近 才 拥 有 变量 ， 更 别提 安全 性 了 。 比 起 Python，CSS 更 接近 
于 绘画 。 你 可 以 尽情 使 用 CSS 创造 ， 它 不 会 给 出 任何 错误 或 者 编译 失败 的 提示 。 

精通 CSS， 需 要 学 习 CSS 的 所 有 功能 。 了 解 得 越 多 ,对 CSS 的 感受 就 越 自然 。 练 习 得 越 多 ， 
就 越 能 轻松 地 想到 完美 的 布局 和 定位 方法 。 读 得 越 多 ， 就 越 能 从 容 地 应 对 任何 设计 。 

真正 优秀 的 CSS 开发 人 员 不 会 害怕 任何 设计 。 每 项 工作 都 变 得 像 解 谜 游戏 一 样 ， 能 够 锻炼 
你 的 聪明 才智 。 真 正 优秀 的 CSS 开发 人 员 对 CSS 的 功能 有 全 面 而 广泛 的 了 解 。 本 书 是 你 成 为 真 
下 优秀 的 CSS 开发 人 员 的 阶梯 ， 能 够 让 你 掌握 必要 的 知识 ， 帮 你 成 功 实现 目标 。 

请 允许 我 再 打 个 比方 。 虽 然 CSS 诞生 于 几 十 年 前 ， 但 它 有 点 像 《 严 风 战 警 》 这 部 电影 ， 你 
可 以 做 任何 想 做 的 事情 ， 只 要 事情 按照 的 你 预期 发 展 就 行 。CSS 没有 任何 硬性 规定 , 但 正 因为 全 
靠 上 自己 发 挥 , 没有 衡量 标准 告诉 你 做 得 好 不 好 ， 所 以 你 需要 格外 小 心 。 一 点 改动 就 可 能 产生 巨大 
的 影响 。 一 个 样式 表 也 许 会 像 滚雪球 一 样 增长 到 难以 控制 的 程度 。 最 后 , 你 可 能 会 被 自己 写 的 样 
式 吓 到 |! 

基 思 的 这 本 书 知 识 面 很 广 ， 每 一 个 知识 点 都 能 让 你 成 为 更 优秀 的 CSS 开发 人 员 ， 助 你 制服 
《疾风 战 警 》 中 的 怪 博 士 。 你 将 次 入 到 这 门 语言 本 身 ， 掌 握 CSS 的 功能 。 此 外 ， 你 将 围绕 这 门 语 
言 学 到 很 多 创意 ， 帮 助 你 在 其 他 方面 成 长 。 你 将 更 加 高 效 地 写 出 易 理解 且 高 性 能 的 持久 的 代码 。 

即使 是 经 验 丰富 的 CSS 开发 人 员 也 能 从 本 书 中 获 益 菲 浅 。 即 使 你 发 现 读 到 的 是 已 知 的 内 容 ， 
也 能 助 你 提升 技能 ， 巩 固 知 识 。 你 还 能 发 现 一 些 让 自己 惊喜 的 “宝藏 ”， 从 而 扩展 知识 面 。 
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CSS 在 1994 年 被 提出 ，1996 年 由 Internet Explorer 3 首次 (部 分 地 ) 实现 。 正 是 在 那 段 时 间 ， 
我 发 现 了 神奇 的 查看 源 代码 ( View Source ) 按钮 ,并 意识 到 一 个 网 页 的 全 部 秘密 就 在 一 份 纯 文本 
文件 里 ， 等 着 我 去 破译 。 我 用 一 个 文本 编辑 器 编码 并 观察 效果 ， 就 这 样 上 自学 了 HTML 和 CSS。 
这 成 了 我 在 网 上 花费 大 量 时 间 的 一 个 有 趣 的 借口 。 

同时 ， 我 需要 找 一 份 真正 的 工作 ， 于 是 取得 了 一 个 计算 机 科学 的 学 位 。 在 21 世纪 初 “Web 
开发 人 员 ” 的 概念 出 现时 ， 我 还 不 知道 它 能 和 CSS 扯 上 关系 。 

我 很 早 就 开始 写 CSS。 即 使 是 在 工作 中 使 用 ， 我 仍然 把 CSS 当成 好 玩 的 游戏 。 我 从 事 过 后 
端 和 前 端的 工作 ， 但 无 论 在 哪个 团队 中 ， 我 都 是 CSS 专家 。 而 CSS 往往 是 Web 技术 栈 中 最 容易 
被 忽视 的 一 部 分 。 但 是 ， 一 旦 你 的 项 目 编写 了 清晰 的 CSS 代码 ， 你 就 再 也 离 不 开 它 了。 每 个 经 
验 丰 军 的 Web 开发 者 在 见识 到 CSS 的 神奇 效果 后 ， 大 部 分 会 问 :“ 我 该 如 何 学 习 CSS? ” 

这 个 问题 没有 简单 直接 的 答案 ， 因 为 学 习 CSS 并 不 是 学 习 一 两 个 小 技巧 ， 而 是 要 理解 这 门 
语言 的 方方面面 ， 并 知道 它们 如 何 搭配 使 用 。 有 些 书 对 CSS 做 了 不 错 的 人 门 介绍 ， 但 是 很 多 开 
发 人 员 已 经 对 CSS 的 基础 有 了 一 定 的 了 解 ;， 有 些 书 则 教授 了 许多 有 用 的 技巧 ， 但 前 提 是 读者 已 
经 精通 了 这 门 语言 。 

与 此 同时 ，CSS 正在 加 速 变 化 。 啊 应 式 设计 如 今 已 经 是 事实 标准 了 。Web 字体 也 早已 普及 。 
2016 年 ， 我 们 见证 了 Flexbox 的 崛起 ; 2017 年 ， 网 格 布 局 开始 兴起 ， 混 合 模式 、 盒 阴影 、 变 换 、 
过 渡 、 动 画 也 刚刚 普及 。 随 着 越 来 越 多 的 浏览 右 变 得 “长 青 ”"， 具 备 目 动 升级 新 版 本 的 功能 ， 新 
的 CSS 特性 还 会 源源 不 断 地 出 现 。 我 们 需要 关注 的 知识 点 太 多 了 。 

不 管 你 是 和 信行 不 久 的 新 手 ， 还 是 有 一 定 经 验 ， 但 需要 提升 CSS 技能 的 开发 人 员 ， 这 本 书 都 
能 帮助 你 紧 跟 CSS 发 展 的 步伐 。 本 书 选取 的 知识 点 具备 以 下 三 个 特点 之 一 。 

口 基本 特性 。 很 遗憾 ， 很 多 开发 人 员 没 有 完全 理解 CSS 的 众多 基础 概念 ， 包 括 层 琶 、 浮 动 

布局 的 行为 ， 以 及 定位 。 本 书 会 深入 探讨 这 些 知识 点 ， 并 人 解释 它们 的 工作 原理 。 
口 新 特性 。 过 去 几 年 涌现 了 许多 新 特性 ， 甚 至 还 有 一 些 特性 刚刚 萌芽 。 本 书 会 介绍 CSS 的 
新 功能 以 及 那些 尚 在 孵化 的 特性 。 本 书 更 关注 未 来 ,虽然 我 会 适当 给 出 向 后 兼容 的 方案 ， 
但 是 我 对 当前 以 及 未 来 的 跨 浏 览 右 开发 十 分 乐观 。 

口 大 部 分 CSS 书 没有 介绍 到 的 特性 。CSS 世界 很 庞大 。 现 代 Web 应 用 程序 开发 的 世界 里 充 
满 了 重要 的 最 佳 实践 以 及 通用 方法 。 它 们 不 一 定 属 于 CSS 语言 , 但 是 一 定 属于 CSS 文化 。 
它们 对 现代 Web 开发 至 关 重 要 。 

如 何尝 习 CSS 呢 ? 你 会 在 本 书 中 找到 答案 。 
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天 于 本 书 


CSS 日 趋 成 熟 。 越 来 越 多 的 Web 开发 人 员 意 识 到 目 己 虽然 “知道 ”CSS,， 但 是 理解 得 还 不 够 
深入 。 近 年 来 ，CSS 语言 不 断 发 展 ， 曾 经 精通 CSS 的 开发 人 员 现 在 也 可 能 需要 掌握 很 多 新 技能 。 
本 书 则 在 达成 两 个 目标 : 帮 你 深度 掌握 CSS 语言 ， 并 快速 了 解 CSS 的 新 进展 和 新 特性 。 

本 书 名 叫 《 深 入 解析 CSS》， 但 它 也 是 一 本 关于 CSS 广度 的 书 。 对 于 某 些 很 难 理解 或 通常 被 
错误 理解 的 CSS 概念 ， 我 会 详细 地 解释 它们 的 工作 原理 及 其 展现 某 种 行为 的 原因 。 对 于 有 些 话 
题 , 我 不 会 面面俱到 , 但 是 介绍 的 内 容 足 以 让 你 高 效 地 运用 相关 技术 ,并 且 会 指出 进一步 学 习 的 
方向 。 总 之 ， 这 本 书 能 够 填补 你 的 知识 育 区 。 

本 书 有 些 话题 值得 另外 写 一 本 书 去 单独 介绍 ， 比 如 : 动画 、 排 版 ， 其 至 是 Flexbox 和 网 格 布 
局 。 我 的 目的 是 帮 你 扩展 知识 面 、 补 齐 短 板 ， 并 让 你 爱 上 CSS。 


本 书 读者 


自 完 ， 本 书 的 读者 应 该 是 那些 疲 于 跟 CSS 较劲 、 想 要 真正 理解 CSS 工作 原理 的 开发 人 员 。 
你 可 以 是 行业 新 手 ， 也 可 以 是 从 业 十 几 年 的 老手 。 

本 书 的 该 者 应 该 对 HIML CSS 以 及 JavaScript 有 大 致 的 了 解 。 只 要 你 熟悉 CSS 的 基础 语法 ， 
就 能 理解 本 书 。 不 过 ， 本 书 主要 面 癌 的 是 那些 已 经 写 过 一 些 CSS， 但 遇 到 了 困难 ， 对 CSS 感到 
泪 丧 的 开发 人 员 。 本 书 用 到 了 少量 JavaScript, 我 让 这 些 JavaScript 代码 尽 可 能 简单 ， 因 此 只 要 你 
能 理解 一 些 徇 短 的 代码 片段 ， 束 应 该 没有 问题 。 

如 果 你 是 一 位 想 要 涉足 Web 设计 的 设计 师 ， 本 书 也 会 让 你 获 益 良 多 ， 尽 管 本 书 并 没有 特别 
针对 设计 师 而 写 。 这 本 书 还 能 够 让 你 了 解 即 将 共事 的 开发 人 员 的 想法 。 


本 书 结构 


本 书 共 16 昔 ， 分 为 四 部 分 。 第 一 部 分 ,“ 基 础 回顾 ”， 会 回顾 基础 知识 ， 并 重点 关注 几 个 很 
容易 侦 忽视 的 细 广 。 
口 第 1 草 介 绍 层 合 和 继承 。 这 些 概念 仙 员 控制 哪些 样式 会 作用 于 哪些 网 页 元 系 。 
口 第 2 章 讨 论 相 对 单位 ， 重 点 介绍 em 和 rem。 相 对 单位 很 灵活 ,是 CSS 中 的 重要 工具 。 这 
一 章 会 让 你 熟悉 它们 的 使 用 方法 。 
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口 第 3 章 介 绍 盒 模型 ， 包 括 控 制 网 页 元 素 大 小 和 元 素 之 间 的 间距 。 
第 二 部 分 ,“ 精 通 布局 ”， 会 介绍 网 页 布局 的 各 种 关键 工具 。 
口 第 4 章 深 入 探索 浮动 布局 。 我 们 将 构建 一 个 多 列 布局 的 页 面 ， 并 学 习 如 何 处 理 浮动 布局 
的 一 些 棘 手 的 特性 。 
口 第 $ 章 介绍 Flexbox。 这 是 一 种 比较 新 的 布局 方式 。 这 一 章 先 介绍 基础 概念 ， 然 后 进入 布 
局 实践 。 
口 第 6 章 介 绍 一 种 全 新 的 布局 工具 一 一 网 格 。 它 实现 了 之 前 CSS 无 法 实现 的 布局 。 
口 第 7 章 深 入 探索 用 position 属性 实现 定位 ， 包 括 绝 对 定位 、 固 定 定 位 等 。 定 位 是 很 多 
开发 人 员 容 易 遇 到 麻烦 的 地 方 ， 所 以 加 强 对 定位 的 理解 至 关 重 要 。 
口 第 8 章 介 绍 啊 应 式 设计 ， 具 体会 介绍 在 不 同 屏 大 尺寸 和 设备 类 型 上 构建 啊 应 式 网 站 的 三 
大 原则 。 
第 三 部 分 ,“ 大 型 应 用 程序 中 的 CSS”, 会 介绍 新 的 最 佳 实践 。 让 网 页 元 素 按照 你 的 想法 展现 
是 一 回 事 ; 随 着 Web 应 用 程序 的 发 展 ， 为 了 将 来 可 以 理解 和 维护 而 组 织 代码 则 是 男 一 回 事 。 这 一 
部 分 会 介绍 一 些 用 于 管理 代码 的 重要 技术 。 
口 第 9 章 介 绍 如 何 用 模块 化 的 方式 组 织 CSS， 以 便 代 码 可 以 复 用 并 且 易 于 维护 。 
口 第 10 章 介 绍 如 何 构建 一 个 模式 库 。 这 是 团队 成 员 使 用 和 维护 CSS 的 一 个 关键 部 分 。 
第 四 部 分 ,“ 高 级 话题 ”, 会 带 你 进入 设计 的 世界 。 这 一 部 分 会 探讨 与 设计 师 共 事 时 需要 考虑 
哪些 重要 因素 ， 以 及 上 自己 如 何 做 一 点 设计 工作 一 一 因为 有 时 会 派 上 用 场 。 
口 第 11 章 讨论 阴影 、 渐 变 以 及 混合 模式 。 它 们 搭配 起 来 可 以 实现 优雅 的 用 户 界 面 。 
口 第 12 章 介绍 如 何 使 用 对 比 、 颜 色 以 及 间距 。 当 开始 注意 这 些 细节 时 ， 网 页 设计 在 从 优秀 
到 上 绅 越 的 路 上 就 迈 出 了 一 大 步 。 
口 第 13 章 介 绍 Web 排版 : 使 用 在 线 字 体 文 件 为 网 站 或 者 应 用 程序 赋予 独特 的 个 性 。 
口 第 14 章 介绍 基于 过 渡 的 网 页 动 效 ， 用 于 改变 网 页 元 素 的 形状 、 颜 色 或 大 小 。 
口 第 15 章 介绍 变换 ， 它 是 跟 过 渡 和 动画 搭配 使 用 的 重要 工具 。 这 一 章 也 会 探讨 在 网 页 中 实 
现 动 效 的 性 能 。 
口 第 16 章 讨 论 关 键 帧 动画 。 你 将 学 习 如 何 使 用 复杂 动 效 向 用 户 传 递 信息 。 
最 后 还 有 两 个 附录 。 
口 附录 A 列举 了 目前 所 有 的 CSS 选择 需 类 型 。 
口 附录 B 介 绍 了 预 处 理 器 。 如 果 你 对 预 处 理 器 不 是 很 熟悉 的 话 ， 可 以 从 这 一 附录 开始 。 
我 精心 编排 了 本 书 。 本 书 首先 会 介绍 你 必须 了 解 的 基础 知识 , 后 面 的 话题 都 是 基于 前 面 的 话 
题 展 开 的 。 我 在 很 多 地 方 会 引用 前 面 章节 的 内 容 和 示例 ,并 将 它们 联系 起 来 。 虽 然 我 会 在 不 同 的 
地 方 列 出 有 价值 的 参考 资料 ， 但 是 建议 你 按 顺 序 阅 读本 书 。 






















































































关于 本 书 3 
代码 约定 和 代码 库 


本 书包 含 了 许多 源码 示例 。 有 的 是 在 编号 了 的 代码 清单 中 ,有 的 是 在 正文 里 。 所 有 源码 都 采 
用 等 宽 字 体 ， 以 便 跟 普通 文字 区 分 开 。 有 时 候 代 码 还 会 加 粗 ， 以 突出 在 前 一 步 的 基础 上 改动 过 的 
代码 ， 例 如 当 给 已 有 的 一 行 代码 加 上 新 特性 时 。 

在 很 多 情况 下 ， 书 中 出 现 的 源码 经 过 了 重新 格式 化 。 我 添加 了 换行 并 调整 了 缩 进 以 适应 本 
书 版 面 。 因 为 极 少 数 情况 下 ， 这 样 还 不 够 ， 所 以 代码 清单 会 加 入 行 继 续 标 记 ( 加 )。 另 外 ， 如 
采 正 文中 对 代码 做 了 解释 ， 则 会 将 代码 清单 中 的 注释 删 挥 。 许 多 代码 清单 中 会 写 注 解 ， 以 强调 
重要 概念 。 

CSS 需要 跟 HTML 一 起 搭配 使 用 。 我 通常 会 提供 一 份 HTML 和 一 份 CSS 代码 清单 。 在 大 多 
数 草 市 里 ， 多 份 CSS 清单 会 复 用 同一 份 HTML。 我 会 指导 你 一 步 一 步 地 编辑 样式 表 ， 并 会 尽 可 
能 清晰 地 显示 每 一 步 之 间 的 差异 。 

本 书 的 源码 放 在 git 仓库 ( http://github.com/CSSInDepth/css-in-depth ) 以 及 Manning 出 版 社 网 
站 ( http://manning.com/books/css-in-depth ) 中 。" 乍 一 看 会 觉得 缺失 了 一 些 代 码 清 单一 一 因为 可 
运行 的 示例 同时 需要 HTML 和 CSS， 所 以 我 束 将 大 部 分 的 代码 清单 放 在 一 份 HTML 中 ,用 
<style> 标 签 放 CSS 代码 。 也 就 是 说 在 代码 库 里 ，HTML 和 CSS 合并 到 了 一 个 文件 中 。 

比如 在 第 1 章 中 ， 代 码 清单 1-1 是 HTML 代码 ， 代 码 清单 1-2 是 要 应 用 到 HTML 上 的 CSS 
代码 。 在 代码 库 里 ， 我 将 它们 合并 到 listing-1.2.html 文件 中 了 。 代 码 清 单 1-3 是 对 代码 清单 1-2 
的 修改 ， 放 在 了 listing-1.3.html 文件 中 ， 它 也 包含 了 代码 清单 1-1 里 的 HTML 代码 。 









































跨 浏 贤 带 测试 是 Web 开发 中 很 重要 的 一 部 分 。 本 书 大 多 数 代 码 在 E10、IE11、 和 微软 Edge、 
Chrome、Firefox 、Safari、Opera， 以 及 大 多 数 移动 浏览 硕 中 均 文 择 。 较 新 的 特性 不 一 定 得 到 了 所 
有 浏览 顶 的 文 持 ， 遇 到 这 种 情况 时 我 会 及 时 说 明 。 

不 要 仅仅 因为 某 个 浏览 希 不 文 持 某 个 特性 承 不 去 使 用 它 。 通 篆 可 以 为 旧版 的 浏览 器 提供 一 个 
回 退 ( fallback ) 方案 。 本 书 会 在 很 多 地 方 提供 这 种 回 退 方 案 的 示例 。 

如 果 你 要 在 自己 的 计算 机 上 运行 书 中 的 代码 示例 ， 我 推荐 使 用 最 新 版 本 的 Firefox 或 者 
Chrome 浏览 天 。 


针对 纸 质 书 读者 的 说 明 


书 中 很 多 图 片 原本 是 彩色 的 。 本 书 电 子 版 能 显示 彩 网 ,阅读 时 不 妨 参考 。 要 获得 本 书 电子 版 
(PDF 、mobi 格式 )， 请 访问 本 书 网 灵 社 区 主页 http://www.ituring.com.cn/book/2583。 












































GD 示例 代码 也 可 以 从 本 书 图 灵 社 区 页 面 (http:/www.ituring.com.cn/book/2583 ) 获取 。 一 一 编者 注 
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本 书 论坛 


购买 了 本 书 英 文 版 的 谈 者 可 以 免费 访问 一 个 由 Manning 出 版 社 维护 的 私有 论坛 ， 你 可 以 在 论坛 
上 评论 本 书 , 询问 技术 问题 ,并 获得 作者 或 其 他 用 户 的 帮助 。 论 坛 地 址 是 https://forums.manning.com/ 
forums/css-in-depth。 你 还 可 以 访问 https:/forums.manning.comyforums/， 学 习 Manning 论坛 和 行为 
规范 的 更 多 内 容 。 

Manning 问 读 者 承诺 提供 一 个 供 读 者 之 间 以 及 读者 和 作者 之 间 交 流 的 论坛 。 这 并 不 代表 便 性 
要 求 作者 一 定 要 投入 多 少 精力 参与 到 交流 中 ， 因 为 作者 对 论坛 的 贡献 是 志愿 行为 〈 并 且 是 免费 
的 )。 我 们 建议 读者 询问 富有 挑战 的 问题 ， 以 免 作 者 不 感 兴趣 。 只 要 本 书 还 在 印 ， 论 坛 和 之 前 的 
讨论 归档 都 可 以 在 出 版 社 的 网 站 找到 。 


天 于 作者 


基 思 … J 格兰特 目前 是 洲际 交易 所 公司 (Intercontinental Exchange, Inc.，ICE ) 的 一 名 高 级 
Web 开发 人 员 ,他 为 公司 和 纽约 证 券 交 易 所 的 网 站 编写 和 维护 CSS。 他 用 HTML .CSS 和 JavaScript 
构建 和 维护 Web 应 用 程序 和 网 站 已 经 有 11 年 的 专业 经 验 。 他 目 学 HIML 和 CSS, 早年 间 在 这 门 
技术 上 还 积累 了 好 几 年 非 正式 经 验 。 

他 的 经 理 因 为 他 在 CSS 方面 的 专长 而 将 其 市 人 现在 的 网 站 团队 ， 当 时 ICE 需要 实现 新 版 的 
网 站 。CSS 让 公司 能 够 通过 构建 独特 而 又 吝 有 创意 的 网 站 来 树立 品牌 , 并 且 能 够 帮助 复杂 的 Web 
应 用 程序 实现 精巧 的 布局 。 

虽然 基 思 的 主要 工作 是 JavaScript 开发， 但 在 就 职 过 的 每 家 公司 ， 他 都 是 一 位 重要 的 CSS 指 
导 者 。 


天 于 封面 插图 


本 书 的 封面 插图 出 目 19 世纪 的 一 个 众多 艺术 家 作品 的 合集 ， 该 作品 集 由 Louis Curmer 编辑 
并 于 1841 年 在 巴黎 出 版 。 这 本 合集 名 叫 Zes Francais peints par euxmémes， 翻 译 成 瑞 文 是 The 
French People Painted by 7T1ezse1ves。 每 一 张 插 图 都 画 得 很 精致 ， 并 且 是 手工 上 色 。 这 本 合集 里 
各 种 各 样 的 绘画 生动 地 展示 了 大 约 200 年 前 的 世界 中 , 不 同 地 域 、 城 镇 、 村 庄 甚至 是 邻里 之 间 的 
文化 差异 有 多 大 。 由 于 彼此 隔离 , 人 们 说 着 不 同 的 方言 和 语言 。 在 城市 的 街道 上 或 者 乡村 小 路 上 ， 
通过 人 们 的 罕 着 就 能 够 轻易 地 判断 他 们 住 在 哪里 、 做 什么 生意 、 有 着 什么 样 的 映 份 。 

如 今 的 看 装 规 范 已 经 改变 , 那 时 巨大 的 地 域 差异 性 如 今 已 经 逐渐 消逝 。 现 在 仪 赁 外 表 很 难 区 
分 来 日 不 同 大 陆 的 人 ,更 不 用 说 来 目 不 同 的 城镇 或 者 地 域 的 人 了 ,也 许 我 们 以 文化 多 样 性 为 代价 ， 
换 来 了 更 丰富 的 个 人 生活 ， 当 然 还 有 更 加 丰富 且 迅 速 发 展 的 技术 生活 。 

当 很 难 区 分 不 同 的 计算 机 图 书 时 ，Manning 出 版 社 用 两 个 世纪 前 反映 不 同 地 域 生 活 的 作品 作 
为 封面 ,象征 计算 机 行业 的 独创 性 和 主动 性 ， 用 这 本 合集 里 的 画作 ( 如 本 书 封面 ) 将 这 种 多 样 性 
再 次 呈现 了 出 来 。 
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第 一 部 分 


葵 础 回 刷 





第 一 部 分 将 深入 探 寺 CSS 最 基本 的 部 分 : 层 合 、 相 对 单位 以 及 盒 模 型 。 
前 三 章 介 绍 的 这 些 基 础 知识 决定 了 给 网 页 元 系 添 加 什么 样式 , 以 及 如 何 确定 
这 些 元 素 的 大 小 。 全 面 理解 这 些 内 容 是 阅读 本 书后 续 章 节 以 及 学 习 其 他 CSS 
知识 的 前 提 。 




















本 草 概要 

口 组 成 层 一 的 四 个 部 分 

口 层 登 和 继承 的 区 别 

口 如 何 控制 样式 和 元 系 的 对 应 关系 
口 人 简写 声明 的 常见 误区 





在 软件 开发 中 ，CSS 是 很 特别 的 存在 。 严 格 来 讲 ， 它 不 是 编程 语言 ， 却 要 求 抽 象 思维 。 它 不 
是 纯粹 的 设计 工具 ， 却 要 求 创 造 力 。 它 提供 了 看 似 人 简单 的 声明 式 语法 ， 但 是 在 大 型 项 目 中 写 过 
CSS 的 人 都 知道 它 可 能 会 变 得 极其 复杂 。 

在 学 习 传 统 编程 中 遇 到 问题 时 ， 你 通常 知道 该 搜索 什么 (比如 ,“ 如 何 找到 一 个 数组 里 类 型 
为 x 的 这 ”), 在 CSS 中 , 却 很 难 将 问题 提炼 成 一 句 话 。 即使 可 以 , 答案 一 般 也 是 “这 得 看 情况 ”。 
最 好 的 解决 办 法 通常 取决 于 具体 场景 ， 以 及 你 希望 以 多 大 粒度 处 理 各 种 边缘 情况 。 

尽管 了 解 一 些 “ 小 技巧 ”或 者 具体 的 实现 方式 很 有 用 ， 真 正 掌 握 CSS 却 需 要 理解 这 些 实践 
背后 的 原理 。 本 书 虽 然 包 含 了 很 多 例子 ,但 其 核心 是 CSS 的 原理 。 

本 书 第 一 部 分 首先 介绍 CSS 最 基本 的 原理 : 层 善 、 爷 模型 、 可 用 的 各 种 单位 类 型 。 大 多 数 
Web 开发 人 员 知 道 层 登 和 盒 模型 。 他 们 了 解 像 系 单位 ， 可 能 还 听 说 过 “应 该 改 用 em 单位 ”。 然 
而 这 类 话题 太 多 了 , 对 此 一 知 半 解 不 能 让 你 走 得 更 远 。 如 果 要 掌握 CSS, 你 一 定 要 理解 基础 知识 ， 
并 且 是 深入 地 理解 。 

你 现在 一 定 迫 不 及 待 地 想 要 学 习 最 新 、 最 酷 的 CSS 特性。 那些 特性 确实 邻 人 兴奋 ， 但 首先 
你 需要 复习 一 下 基础 知识 ,我 会 快速 地 概括 你 可 能 熟知 的 所 有 基础 知识 ,然后 深入 介绍 每 个 话题 。 
本 章 的 目的 是 强化 基础 ，CSS 的 其 他 部 分 是 在 这 些 基础 上 构建 的 。 

本 章 将 首先 介绍 CSS 里 的 C (代表 cascade， 层 县 ), 我 将 先 讲解 它 的 原理 ,然后 展示 一 些 例 
子 。 接 着 将 介绍 与 层 著 相关 的 话题 继承 。 之 后 将 介绍 简写 属性 以 及 对 它们 的 常见 误解 。 

总 而 言 之 , 本 章 的 话题 都 是 关于 将 特定 样式 应 用 到 目标 元 素 的 , 其 中 有 很 多 开发 人 员 踩 过 的 
“ 坑 ”。 理 解 这 些 话题 能 够 计 你 更 好 地 掌握 CSS。 运 气 好 的 话 ， 你 还 会 更 加 欣赏 和 享受 开发 CSS 
的 乐趣 。 









































1.1 后 登 


CSS 本 质 上 就 是 声明 规则 ， 即 在 各 种 条 件 下 ,我 们 和 希望 产生 特定 的 效果 。 如 果 某 个 元 素 有 这 
个 类 , 则 应 用 这 些 样 式 。 如 打球 元 素 是 了 元 素 的 子玉 点 ， 则 应 用 那些 样式 。 训 览 融 会 根据 这 些 规 
则 ， 判 断 每 个 规则 应 该 用 在 哪里 ， 并 使 用 它们 去 泻 染 页 面 。 

如 果 只 看 几 个 小 例子 ，CSS 的 规则 很 容易 理解 。 但 是 当 样 式 表 变 大 , 或 者 将 同一 份 样式 表 应 
用 到 更 多 的 网 页 时 ，CSS 代码 很 快 就 会 变 得 复杂 。 在 CSS 里 实现 一 个 效果 通 第 有 好 几 种 方式 。 
当 HTML 结构 变化 ， 或 者 将 同一 份 样式 表 应 用 到 不 同 的 网 页 时 ， 不 同 的 实现 方式 会 产生 不 同 的 
箔 采 。CSS 开发 很 重要 的 一 点 就 是 以 可 预测 的 方式 书写 规则 。 

首先 我 们 需要 理解 浏览 带 如 何 解 析 样 式 规则 。 每 条 规则 单独 来 看 很 简单 , 但 是 当 两 条 规则 提 
供 了 冲突 的 样式 时 会 发 生 什么 呢 ?” 如 果 你 发 现 有 一 条 规则 没有 按照 预期 生效 , 可 能 是 因为 力 一 条 
规则 跟 它 冲突 了 。 要 想 预 测 规则 最 终 的 效果 ， 束 需要 理解 CSS 里 的 层 合 。 

为 了 演示 ， 你 需要 构建 一 个 简单 的 网 页 头 部 〈 如 图 1-1 所 示 )。 上面 是 网 站 标题 ， 下 面 是 一 
排 蓝 绿色 的 导航 链接 。 最 后 一 个 链接 是 桶 黄色 的 ， 用 来 表示 其 特 丈 性。 
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图 1-1 网 页 标题 和 导航 链接 
























































给 纸 质 书 读者 的 提示 本 书 中 的 很 多 图 片 应 该 查看 彩色 版 本 。 本 书 的 电子 版 能 显示 彩 图 ， 

阅读 时 应 该 参考 。 请 访问 http://www.ituring.com.cn/book/2583 以 获取 中 文 版 电子 书 。 

在 构建 这 个 网 页 头 部 时 ， 你 可 能 熟悉 大 部 分 的 CSS。 因此， 我 们 将 重点 关注 你 一 知 半 解 的 
部 分 。 

首先 , 创建 一 个 HTML 文档 和 一 个 样式 表 , 将 样式 表 命 名 为 styles.css。 将 代码 清单 1-1 粘贴 
到 HTML 中 。 








说 明 本 书 的 所 有 代码 都 可 以 访问 http://www.ituring.com.cn/book/2583 下 载 。 这 个 代码 
库 以 HTML 文件 的 方式 组 织 ， 每 个 HTML 里 都 内 联 了 对 应 的 CSS。 


代码 清单 1-1 网 页 头 部 的 HTML 标记 


<!ldoctype htmil> 


<head> 
<link href="styljes.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<header class="page-header"> | 网 页 标题 
<hli id="page-title" class="title">Wombat Coffee Roasters</hi> 


<IIQAV> 
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<ul id="main-nav" class="nav"> 
Zlis<a hrefs"™/ "yyHomex/ay</lis 导航 链接 列表 
<1i><a href="/coffees">Coffees</a></11i> 
<1i><a href="/brewers">Brewers</a></11i> 
<1i><a href="/specials" class="featured">Specials</a></11i> 
</ul> 
</nav> Co 
</header> 特殊 链接 
</body 

















对 同一 个 元 素 应 用 多 个 规则 时 , 规则 中 可 能 会 包含 冲突 的 声明 .下 面 的 代码 就 展示 了 这 一 点 。 
它 包 含 三 个 规则 集 ， 每 一 个 给 网 页 标题 指定 了 不 同 的 字体 样式 。 标 题 不 可 能 同时 显示 三 种 样式 。 
哪 一 个 会 生效 呢 ? 将 代码 清单 1-2 粘贴 到 CSS 文件 中 ， 看 看 会 出 现 什 么 效 末 。 
代码 清单 1-2 ”冲突 的 声明 


hi { 








font-family: serif.: 标签 (或 类 型 ) 
) 及 | 选择 器 


#page-title f{ 
font-family: sans-serif,; 


} 


人] ID 选择 器 


ee 人 类 选择 器 
) 
包含 冲突 声明 的 规则 集 可 能 会 连续 出 现 , 也 可 能 分 布 在 样式 表 的 不 同 地 方 。 无 论 如 何 ， 对 于 
你 的 HTML 来 说 ， 它 们 都 选中 了 相同 的 元 素 。 
三 个 规则 集 尝试 给 标题 设置 不 同 的 字体 , 哪 一 个 会 生效 呢 ? 浏览 融 为 了 解决 这 个 问题 会 遵循 
一 系列 规则 ， 因 此 最 终 的 效果 可 以 预测 。 在 上 面 的 例子 里 ， 规 则 决定 了 第 二 个 声明 ( 即 ID 选择 
圳 ) 生效 ， 因 此 标题 采用 sans-serif 字 体 (如 图 1-2 所 示 )。 
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Home 
Coffees 
Brewers 


Specials 


图 1-2 ID 选择 器 生效 ， 网 页 标题 最 后 显示 为 sans-serif 字 体 

















层 又 指 的 就 是 这 一 系列 规则 。 它 决定 了 如 何 解决 冲突 ,是 CSS 语言 的 基础 。 虽 然 有 经 验 的 开 
发 人 员 对 层 夫 有 大 体 的 了 解 ， 但 是 层 秋 里 有 些 规则 还 是 容易 让 人 误解 。 

下 面 来 分 析 层 芭 的 规则 。 当 声明 冲突 时 ， 层 到 会 依据 三 种 条 件 解决 冲突 。 

(1) 样式 表 的 来 源 :样式 是 从 哪里 来 的 ， 包 括 你 的 样式 和 浏览 器 默认 样式 等 。 

(2) 选择 器 优先 级 ;哪些 选择 器 比 另 一 些 选 择 器 更 重要 。 


























(3) 源码 顺序 : 样式 在 样式 表 里 的 声明 顺序 。 
层 仅 的 规则 是 按照 这 种 顺序 来 考虑 的 。 图 1-3 概括 展示 了 规则 的 用 法 。 






















候 不 是 内 联 \、 翅 /第 择 器 是 否 
样式 有 不 同 的 优 
(作用 域 ) 


使 用 更 高 优 
先 级 的 来 源 使 用 内 联 声明 a 
里 的 声明 级 的 声 


图 1-3 ” 层 麦 的 高 级 流程 图 ， 展 示 了 声明 的 优先 顺序 





不 同 的 来 源 
或 者 重要 性 






f 氏 
氏 
ou 











这 些 规 则 让 浏览 需 以 可 预测 的 方式 解决 CSS 样式 规则 的 冲突 。 我 们 来 一 个 一 个 地 分 析 。 


术语 解释 

你 熟 不 熟悉 CSS 语法 中 各 部 分 的 名 称 ， 取 决 于 你 从 哪儿 学 的 CSS。 这 一 点 我 不 加 强调 ， 
但 是 因为 整 本 书 都 要 用 到 这 些 术 语 ， 所 以 我 最 好 解释 一 下 这 些 术语 的 意思 。 

以 下 是 CSS 中 的 一 行 。 它 被 称 作 一 个 声明 , 该 声明 由 一 个 属性 ( color ) 和 一 个 值 (blackK ) 
组 成 。 

Go :ole 

不 要 将 CSS 属性 (property ) 跟 HTML 属性 (attribute ) 混淆 。 比 如 在 <a href="/"> 元 
素 里 ，href 就 是 a 标签 的 一 个 HTML 属性 。 

包含 在 大 括号 内 的 一 组 声明 被 称 作 一 个 声明 块 。 声 明 块 前 面 有 一 个 选择 器 ( 如 下 面 的 
Deo 


body { 
EOlOE: ISléacky 
foOncE= amily: Helverlica; 


} 

选择 器 和 声明 块 一 起 组 成 了 规则 集 ( ruleset )， 一 个 规则 集 也 简称 一 个 规则 ， 不 过 我 发 现 
很 少 有 人 说 单数 形式 的 规则 (rule )， 通 常会 用 复数 形式 〈rules )， 用 来 指 一 系列 样式 的 集合 。 

最 后 ，@ 规 则 ( at-rules ) 是 指 用 “@” 符 号 开头 的 语法 。 比 如 import 规则 或 者 @media 查询 。 


1.1.1 样式 表 的 来 源 
你 添加 到 网 页 里 的 样式 表 并 不 是 浏览 器 唯一 使 用 的 样式 表 ， 还 有 其 他 类 型 或 来 源 的 样式 表 。 
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你 的 样式 表 属 于 作者 样式 表 ,， 除 此 之 外 还 有 用 户 代理 样式 表 ,， 即 浏览 辫 坎 认 样 式 。 用户 代理 样式 
表 优先 级 低 ， 你 的 样式 会 履 关 它们 。 


说 明 有 些 浏览 器 允许 用 户 定义 一 个 用 户 样式 表 。 这 是 第 三 种 来 源 ， 它 的 优先 级 介 于 
用 户 代 理 样 式 表 和 作者 样式 表 之 间 。 用 户 样式 表 很 少见 ， 并 且 不 受 网 站 作者 控制 ， 因 此 
这 里 略 过 。 








用 户 代理 样式 在 不 同 浏览 右上 稍 有 差异 ， 但 是 大 体 上 是 在 做 相同 的 事情 : 为 标题 ( <h1> 到 
<h6> ) 和 上 段落 ( <p> ) 添加 上 下 外 边 距 ， 为 列表 〈<ol> 和 <ul> ) 添加 左 侧 内 边 距 ， 为 链接 添加 
颜色 ， 为 元 素 设 置 各 种 默认 字号 。 

1. 用 户 代理 样式 

再 看 一 下 示例 的 网 页 (如 网 1-4 所 示 )。 标 题字 体 是 sans-serif， 由 你 添加 的 样式 决定 。 其 他 
元 条 的 样式 则 是 由 用 户 代 理 样式 决定 : 列表 有 左 侧 内 边 距 ，1ist-style-type 为 aisc， 因 此 
有 项 目 符 号 〈 小 黑 点 ) 链接 为 蓝 色 且 有 下 划 线 。 标 题 和 列表 有 上 下 外 边 距 。 
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。 Coffees 


图 1-4 用 户 代理 样式 给 网 页 头 部 设置 了 移 认 样式 


浏览 需 应 用 了 用 户 代理 样式 后 才 会 应 用 你 的 样式 表 , 即 作者 样式 表 。 你 指定 的 声明 会 覆盖 用 
户 代 理 样式 表 里 的 样式 。 如 果 你 在 HTML 里 面 链 接 了 多 个 样式 表 ， 那 么 它们 的 来 源 都 相同 ， 即 
作者 。 

用 户 代 理 样式 表 因 为 设置 了 用 户 普遍 需要 的 样式 , 所 以 不 会 做 一 些 完全 超出 预期 的 事情 。 当 
你 不 喜欢 默认 样式 时 , 可 以 在 自己 的 样式 表 里 设 置 别 的 值 。 现 在 就 试 试 覆盖 一 些 你 不 想 要 的 用 户 
代理 的 样式 ， 让 网 页 看 起 来 如 图 1-5 所 示 。 
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图 1-5 作者 样式 覆盖 用 户 代 理 样 式 ， 因 为 作者 样式 的 优先 级 更 局 


在 代码 清单 1-3 中 ， 我 将 之 前 冲突 的 字体 声明 去 掉 了 ， 为 外 添加 了 新 的 样式 , 设置 了 各 种 颜 
色 ， 禾 盖 了 用 户 代 理 默 认 的 外 边 距 和 列表 内 边 距 以 及 项 目 符 号 。 将 代码 清单 1-3 更 新 到 你 的 样式 
表 中 。 


























jy 
Bx 
~ 


代码 清单 1-3” 禾 兹 用户 代理 样式 
hi { 
Color: #2f4f4f; 
margin-bottom: 10px; 


| 


减 小 外 边 距 

#main-nav 1{ 

margin-top: 10px; 

list-style: none; 

padding-left: 0; ee 
, 删除 用 户 代理 的 列表 样式 
#main-nav li { 、 

display: inline-block; 让 列表 元 素 水 平 排列 ,而 
} 不 是 上 下 和 妓 放 
#main-nav a f{ 

Color: white; 

et #13a4a4.; 给 导航 链接 加 上 类 似 按 

Be 钮 的 外 观 


border-radius: 2px; 
text-decoration: none; 


} 


如 果 长 期 使 用 CSS, 你 大 概 习 惯 了 宪 盖 用 户 代 理 的 样式 。 这 种 做 法 实际 上 就 是 利用 了 层 芋 的 
样式 来 源 规则 。 你 号 的 样式 会 窗 盖 用 户 代 理 样式 ， 因 为 来 源 不 同 。 


说 明 你 可 能 注意 到 我 用 了 ID 选择 器 ， 但 应 该 避免 使 用 这 种 选择 器 ， 稍 后 会 做 出 解释 。 











2. !important 声明 
样式 来 源 规 则 有 一 个 例外 : 标记 为 重要 (important ) 的 声明 。 如 下 所 示 ， 在 声明 的 后 面 、 分 
号 的 前 面 加 上 !important， 该 声明 就 会 被 标记 为 重要 的 声明 。 





Color: red !important; 


标记 了 !important 的 声明 会 被 当 作 更 高 优先 级 的 来 源 ， 因 此 总 体 的 优先 级 按照 由 高 到 低 

(1) 作者 的 :important 

(2) 作者 

(I 理 

层 著 独立 地 解决 了 网 页 中 每 个 元 双 的 样式 属性 的 冲突 。 例 如 ， 如 果 给 段落 设置 加 粗 的 字体 ， 
用 户 代 理 的 上 下 外 边 距 样式 仍然 会 生效 除非 被 明确 履 六 )。 处 理 过 渡 和 动画 时 ， 还 会 再 提 到 样 
式 来 源 的 概念 ， 因 为 它们 会 引入 更 多 的 来 源 。! important 注释 是 CSS 的 一 个 有 趣 而 怪异 的 特 
性 ， 稍 后 会 再 解释 。 
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1.1.2 ”理解 优先 级 


如 果 无 法 用 来 源 解决 冲突 声明 , 训 览 厅 会 答 试 检查 它们 的 优先 级 。 理 解 优 先 级 很 重要 。 不 理 
解 样 式 的 来 源 照样 可 以 写 CSS， 因 为 99% 的 网 站 样式 是 来 日 同样 的 源 。 但 是 如 采 不 理解 优先 级 ， 
怠 会 被 坑 得 很 惨 。 不 全 的 是 ， 很 少 有 人 提 及 这 个 概念 。 

浏览 器 将 优先 级 分 为 两 部 分 : HTML 的 行内 样式 和 选择 器 的 样式 。 

1. 行内 样式 

如 果 用 HTML 的 style 属性 与 样式， 这 个 声明 只 会 作用 于 当前 元 素 。 实 际 上 行内 元 系 属 于 
“市 作用 域 的 ”声明 , 它 会 罗兰 任何 来 自 样 式 表 或 者 <style> 标 签 的 样式 。 行 内 样式 没有 选择 郁 ， 
因为 它们 下 接 作 用 于 所 在 的 元 素 。 

在 示例 中 ， 知 要 让 叶 航 六 单 里 的 特殊 链接 变 成 杠 黄 色 ， 如 图 1-6 所 示 。 有 好 几 种 方式 能 够 实 
现 这 种 效果 ， 首 先 使 用 代码 清单 1-4 所 示 的 行内 样式 。 
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图 1-6 使 用 行内 样式 履 善 选择 需 样 式 
按 代码 清单 1-4 修改 你 的 代码 ， 然 后 在 浏览 妖 中 查看 。( 稍 后 会 撤销 这 部 分 修改 。) 
代码 清单 1-4 行内 样式 窗 盖 了 其 他 声明 


<]i> 




















<a href="/specials" class="featured" 
style="background-color: orange;"> 用 style 属性 设置 行 
Specials 内 样式 
</a> 
</11i> 


为 了 在 样式 表 里 覆 六 行 内 声明 ， 沉 要 为 声明 添加 ! important， 这 样 能 将 它 提升 到 一 个 更 蜗 
优先 级 的 来 源 。 但 如 果 行 内 样式 也 被 标记 为 ! important ， 就 无 法 覆盖 它 了 。 最 好 是 只 在 样式 表 
内 用 !important。 将 以 上 修改 撤销 ， 我 们 来 看 看 更 好 的 方式 。 


2. 选择 器 优先 级 

优先 级 的 第 二 部 分 由 选择 带 决 定 。 比 如 , 有 两 个 类 名 的 选择 带 比 只 有 一 个 类 名 的 选择 带 优 抑 
级 更 局。 如 采 一 个 声明 将 育 景色 设置 为 桶 黄色 ， 但 发 一 个 更 高 优 和 多 级 的 声明 将 其 设置 为 蓝 绿 色 ， 
浏 览 硕 承 会 将 蓝 绿 色 应 用 到 元 素 上 。 

为 了 演示 ,我 们 答 试 用 一 个 侧 单 的 类 选择 带 将 特殊 链接 设置 为 屈 黄 色 。 按 照 代码 清单 1-5 更 
新 你 的 样式 表 。 


















































代码 清单 1-5 不 同 优 匈 级 的 选择 大 


#main-nav a { 本 
级 世 
color: white; | EC 级 的 
background-color: #13a4a4; 延 十 责 
padding: 5S5px; ee 
1 访 作 旦 . 
border-radius: 2px; 监 绿色 背景 


text-decoration: none; 


a — 因为 选择 器 优先 级 较 低 ， 所 以 橘 黄色 的 
orange; 


background-color: 背景 声明 不 会 履 盖 监 绿 色 


没有 生效 ! 所 有 的 链接 仍然 是 蓝 绿 色 。 为 什么 呢 ? 第 一 个 选择 带 的 优 抑 级 高 于 第 二 个 选择 从。 
第 一 个 由 一 个 ID 和 一 个 标签 名 组 成 ， 而 第 二 个 由 一 个 类 名 组 成 。 但 选择 厅 的 长 度 并 不 是 决定 优 
先 级 的 唯一 因素 。 

不 同类 型 的 选择 需 有 不 同 的 优先 级 。 比 如 ，ID 选择 器 比 类 选择 器 优先 级 更 高 。 实 际 上 ，ID 
选择 作 的 优先 级 比 拥有 任意 多 个 类 的 选择 带 痢 蜗 。 同 理 ， 类 选择 胡 的 优先 级 比 标签 选择 融 ( 也 称 
类 型 选择 器 ) 更 局 。 

优先 级 的 准确 规则 如 下 。 

口 如 末 选 择 表 的 ID 数量 更 多 ， 则 它 会 胜出 ( 即 它 更 明确 )。 

口 如 来 ID 数量 一 致 ， 那 么 拥有 最 多 类 的 选择 从 胜 出 。 

口 如 条 以 上 两 次 比较 都 一 致 ， 那 么 拥有 最 多 标签 名 的 选择 带 胜 出 。 

思考 代码 清单 1-6 里 的 选择 右 (但 不 要 把 它们 加 到 你 的 网 页 中 )。 它 们 古 按 照 优先 级 由 低 到 
高 的 顺序 排列 的 。 


代码 清单 1-6 ”按照 优 和 匈 级 由 低 到 高 排列 的 选择 表 


html body header hl { < 分 4 个 标签 
COolor: blue; 

















} 


body header.page-header hi1 { 
COlor: orange; 8 3 个 标签 和 1 个 类 


} 


.page-header .title f{ =-—© 2 个 类 


COlor: green; 


Hoage-title { <—@O1 个 ID 


OLOrLS Led 


} 

最 明确 的 选择 器 是 有 1 个 ID 的 @, 因 此 标题 的 颜色 最 终 为 红色 ,第 二 明确 的 是 有 2 个 类 的 人 @。 
如 果 没 有 出 现 带 ID 选择 带 的 @， 则 全 的 声明 会 生效 。 选 择 带 全 比 选择 带 @ 的 优先 级 更 高 ， 尺 管 
选择 需 仿 更 长 : 2 个 类 比 1 个 类 更 明确 。 最 后 ， 选 择 带 人 最 不 明确 ， 它 有 4 个 元 素 类 型 ( 即 标签 
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名 ), 但 是 没有 ID 或 者 类 。 


说 明 伪 类 选择 器 (如 :hover ) 和 属性 选择 器 (如 [type="input"] ) 与 一 个 类 选择 
器 的 优先 级 相同 。 通 用 选择 器 ( * ) 和 组 合 器 ( >、+、~ ) 对 优先 级 没有 影响 。 








如 果 你 在 CSS 里 写 了 一 个 声明 ,但 是 没有 生效 ， 一般 是 因为 被 更 局 优先 级 的 规则 窗 关 了。 
很 多 时 候 开 发 人 员 使 用 ID 选择 益 ， 却 不 知道 它 会 创建 更 高 的 优先 级 ， 之 后 就 很 难 窗 盖 它 。 如 末 
要 和 窗 者 一 个 ID 选择 带 的 样式 ， 怠 必须 要 用 万 一 个 ID 选择 右 。 

这 个 概念 很 何 单 ,但 是 如 果 你 不 理解 优先 级 , 束 无 法 弄 清楚 为 什么 一 个 规则 能 生效 ,为 一 个 
却 不 能 。 


3. 优先 级 标记 

一 个 第 用 的 表示 优先 级 的 方式 是 用 数值 形式 来 标记 , 通常 用 去 号 阳 开 每 个 数 。 比 如 ，“1,2,2” 
表示 选择 硕 由 1 个 下、2 个 类 、2 个 标签 组 成 。 优 先 级 最 高 的 ID 列 为 第 一 位 ， 紧 接 看 是 类 ， 最 后 
是 标签 。 

选择 磊 #page-header #page-title 有 2 个 ID， 没 有 类 ， 也 没有 标签 ， 它 的 优先 级 可 以 
用 “2,0,.0” 表 未 。 选 择 囊 ul 1i 有 2 个 标签 ， 没 有 帮 ， 也 没有 类 名 ， 它 的 优先 级 可 以 用 “0,0,2” 
表示 。 表 1-1 展示 了 代码 清单 1-6 里 的 选择 带 及 其 标记 。 


表 1-1 各 种 选择 器 和 对 应 的 优先 级 


选 择 需 ID 类 标 签 标 记 























html body header hil 0 0 4 0,0,4 
body header.page-header hl 0 1 3 0,1,3 
.page-header .title 0 2 0 0,2,0 
#page-title 1 0 0 1,0,0 





现在 通过 比较 数值 就 能 决定 哪个 选择 需 优 先 级 更 高 ( 更 明确 )。“1,0,0” 的 优先 级 高 于 “0,2,2” 
其 至 “0,10,0”( 尽管 我 不 推荐 写 一 个 长 达 10 个 类 名 的 选择 器 ), 因为 第 一 个 数 ( ID ) 有 最 高 优先 级 。 

有 了 时， 人 们 还 会 用 4 个 数 的 标记 ， 其 中 将 最 重要 的 位 置 用 0 或 1 来 表示 ,代表 一 个 声明 是 否 
是 用 行内 样式 添加 的 。 此 时 ， 行 内 样式 的 优先 级 为 “1,0,0,.0"”。 它 会 覆盖 通过 选择 需 添 加 的 样式 ， 
比如 优先 级 为 “0,1,2,.0”(1 个 ID 和 2 个 类 ) 的 选择 器 。 


4. 关于 优先 级 的 思 

之 前 和 尝试 用 .feature 选择 需 添 加 桶 黄色 背景 ， 但 是 没有 成 功 。#main-nav a 选择 需 包 含 
了 一 个 ID， 履 盖 了 类 选择 器 (优先 级 分 别 为 “1,0,1” 和 “0,1,0”)。 有 好 几 种 方法 可 以 解决 这 个 
问题 。 下 面 介 绍 儿 种 可 行 的 方法 。 

最 快 的 方法 是 将 !important 添加 到 想 要 设置 的 元 素 的 声明 上 。 按 代码 清单 1-7 修改 相应 的 
声明 。 




















jy 
Bx 
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代码 清单 1-7 方法 一 
#main-nav a { 
color: white; 
background-color: #13a4a4; 
padding: Spx; 
border-radius: 2px; 
text-decoration: none; 


} 
将 声明 设 为 重要 , 它 便 拥 
, 有 了 更 高 优先 级 的 来 源 
background-color: orange !important; 


} 

这 个 方法 之 所 以 生效 , 是 因为 !important 注释 将 声明 提升 到 了 更 高 优先 级 的 来 源 。 这 个 方 
法 的 确 简单 ,但 也 很 低级 。 它 可 能 解决 了 眼前 的 问题 , 但 是 会 在 以 后 带 来 更 多 问题 。 一 旦 给 很 多 
声明 加 上 !'important ， 要 禾 羡 已 设置 为 important 的 声明 时 ,该 怎么 做 呢 ?” 当 给 一 些 声明 加 
上 !important 时 ,就 会 完 比 较 来 源 ， 再 使 用 常规 的 优先 级 规则 。 最 终 会 计 一 切 回 到 起 点 : 一 旦 
引入 一 个 ! 1MmBOrtant, 就 会 种 来 更 多 的 !i1-mportant.o 

那么 更 好 的 方法 是 什么 ? 请 不 要 试图 绕 开 选择 融 优 先 级 ,而 是 利用 它 来 解决 问题 。 何 不 提升 
选择 占 的 优先 级 呢 ?” 将 你 的 CSS 修改 为 代码 清单 1-8 中 的 代码 。 














代码 清单 1-8 ”方法 二 
#main-nav a { 优先 级 仍然 


COolor: white; 


是 “1 0 和 
background-color: #13a4a4; Dey 
padding: Spx; 
border-radius: 2px; 
text-decoration: none; 
， 加 将 优先 级 提升 
到 ‘4 ,1 ,0” 
#main-nav .featured { 
background-color: orange; 
} 去 掉 !important 注释 


这 个 方法 也 委 效 了 。 现 在 你 的 选择 需 有 1 个 ID 和 1 个 类 ， 优 先 级 为 “1,1.0”， 比 #main-nav a 
(优先 级 为 “1,0,1”) 高 。 因 此 ， 桶 黄色 背景 是 能 够 应 用 到 元 素 上 的 。 

但 是 这 个 方法 还 能 改进 。 不 提升 第 二 个 选择 硕 的 优先 级 ， 而 是 降低 第 一 个 选择 硕 的 优先 级 。 
导航 链接 元 杂 辣 时 还 有 一 个 类 <ul idqa="main-nav" class="nav">。 所 以 可 以 修改 CSS， 通 
过 类 名 而 不 是 ID 来 选中 元 素 。 如 代码 清单 1-9 所 示 ， 将 选择 大 里 的 #main-nav 改 为 .nav。 





代码 清单 1-9 方法 三 
.nav { 
margin-top: 10px; 
list-style: none; 
padding-left: 0; 
} 


将 样式 表 中 的 “#main-nav” 
全 部 改 为 “ .nav” 


.na 11 { 





display: inline-block; 
} 


-nav a I 降低 第 一 个 选择 器 的 
优先 级 (0,1,1) 


Color: white; 
background-color: #13a4ad4,; 
padding: Spx; 
border-radius: 2px; 
text-decoration: none; 


y 


.nav .featured { 提升 第 二 个 选择 器 的 
background-color: orange; 优先 级 (0,2,0) 


} 
现在 你 已 经 降低 了 这 些 选 择 表 的 优先 级 。 橘 黄色 背景 的 优先 级 足够 高 ， 能 够 覆盖 蓝 绿色 。 
通过 这 些 例子 可 以 发 现 ， 优 先 级 容易 发 展 为 一 种 “军备 苋 赛 "*。 在 大 型 项 目 中 这 一 点 尤为 突 
出 。 通 冲 最 好 让 优先 级 尽 可 能 低 ， 这 样 当 需要 履 兰 一 些 人 样式 时 ， 才 能 有 选择 空间 。 


1.1.3 源码 顺序 


层 伙 的 第 三 步 ， 也 是 最 后 一 步 ， 是 源码 顺序 。 如 来 两 个 声明 的 来 源 和 优先 级 相同 ,其 中 一 个 
声明 在 样式 表 中 出 现 较 晚 ， 或 者 位 于 页 面 较 晚 引入 的 样式 表 中 ， 则 该 声明 胜出 。 

也 就 是 说 ,可 以 通过 控制 源码 顺序 ,来 给 特殊 链接 话 加 样式 。 如 采 两 个 冲突 选择 带 的 优 抑 级 
相同 ， 则 出 现 得 较 晚 的 那个 胜出 。 接 下 来 看 第 四 个 方法 〈 如 代码 清单 1-10 所 示 )。 


代码 清单 1-10 ”方法 四 


.nav a { 

















Color: white; 

background-color: #13a4ad4,; 

padding: Spx; 

border-radius: 2px; 让 优先 级 相同 (0,1,1) 
text-decoration: none; 


} 


a.featureqd { 
background-color: orange; 


} 


在 这 个 方法 里 ,选择 禹 优先 级 相同 。 源 码 顺 序 决定 了 哪个 声明 作用 于 特殊 链接 ， 最 终 产 生 了 
橘 贡 色 的 特 丈 按钮 。 

这 个 方法 解决 了 问题 ， 但 也 引入 了 一 个 潜在 的 新 问题 : 虽然 在 nav 元 系 里 的 特殊 按钮 看 起 
来 正常 了 ,但 是 如 果 你 想 要 在 页 面 其 他 地 方 ， 在 nav 之 外 的 链接 上 使 用 featured 类 呢 ? 最 后 
就 会 有 奇怪 的 混合 样式 : 权 黄 色 的 痛 景 , 但 是 导航 链接 没有 文本 颜色 、 内 边 距 或 者 圆 角 效果 ( 如 
图 1-7 所 示 )。 





























Wombat Coffee Roasters 


Be sure to check out GUur speelals 
图 1-7 位 于 nav 声明 之 外 的 featured 类 产生 了 奇怪 的 效果 
代码 清单 1-11 是 上 图 对 应 的 标记 代码 。 有 一 个 元 素 只 被 第 二 个 选择 需 选 中 ， 没 有 被 第 一 个 
选中 ， 因 而 没有 产生 期 望 的 结果 。 你 得 决定 是 否 让 nav 以 外 的 元 素 拥 有 橘 黄色 的 按钮 样式 ， 如 
采 是 ,需要 确保 将 所 有 和 想 要 的 样式 都 应 用 到 元 厅 上 。 


代码 清单 1-11 nav 之 外 的 特殊 链接 
<header class="page-header"> 
<hli id="page-title" class="title">Wombat Coffee Roasters</hi> 
<nav> 











<ul id="main-nav" class="nav'"> 
<1i><a href="/">Home</a></11i> 
<1i><a href="/coffees">Coffees</a></11i> 
<1i><a href="/brewers">Brewers</a></11i> 





<1i><a href="/specials" class="featured">Specials</a></11i> 
</UuUl1> 





</nav> 
</header> 
<main> 


<p> nav 之 外 的 特殊 链 

立 口 公 右 立 R 八 样 水 

Be sure to check out 接 只 会 有 部 分 样式 

<a href="/specials" class="featured">our specials</a> < 一 
</D> 
</main> 


除非 网 站 有 其 他 需求 ， 否 则 我 倾 问 于 方法 三 (代码 清单 1-9 )。 理想 状态 下 ,你 可 以 凭 经 验 判 
其 在 页 面 其 他 地 方 会 出 现 什 么 样式 需求 。 也 许 你 知道 别处 也 可 能 需要 一 个 特殊 链接 , 这 种 情况 下 ， 
也 许 方法 四 (代码 清单 1-10 ) 更 合适 ， 当 然 在 别处 还 需要 添加 一 些 样 式 来 补充 feature 类 。 

正如 之 前 所 说 ,在 CSS 中 最 好 的 答案 通常 是 “这 得 看 情况 ”"。 实 现 相同 的 效果 有 很 多 途径 。 
多 想 些 实现 方法 , 并 思考 每 一 种 方法 的 利 纵 ,这 是 很 有 价值 的 。 面 对 一 个 样式 问题 时 ,我 经 第 分 
两 个 步骤 来 解决 它 。 首 先 确定 哪些 声明 可 以 实现 效果 。 其 次 ， 思 考 可 以 用 哪些 选择 带 绪 构 ， 然 后 
选择 最 符合 需求 的 那个 。 


1. 链接 样式 和 源码 顺序 

你 刚 开 始 学 习 CSS 时 ,或 许 丈 知道 给 链接 加 样式 要 按照 一 定 的 顺序 书写 选择 带 。 这 是 因为 
源码 顺序 影响 了 层 蕉 。 代 码 清单 1-12 展示 了 如 何以 “正确 ”的 顺序 书写 链接 样式 。 
代码 清单 1-12 链接 样式 


a:link { 
Color: blue; 














text-decoration: none; 
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:visited { 


用 


Color: purple; 


:hover { 


用 


text-decoration: underline; 


:active f{ 
GolOrs. PEG 


} 


书写 顺序 之 所 以 很 重要 ， 是 因为 层 琶 。 优 先 级 相同 时 ， 后 出 现 的 样式 会 覆盖 先 出 现 的 样式 。 
如 有 果 一 个 元 系 同时 处 于 两 个 或 者 更 多 状态 , 最 后 一 个 状态 就 能 敢 羞 其 他 状态 。 如 采用 户 将 鼠标 悬 
停 在 一 个 访问 过 的 链接 上 ， 悬 停 效 果 会 生效 。 如 果 用 户 在 鼠标 悬 停 时 激活 了 链接 ( 即 点 击 了 它 )， 
激活 的 样式 会 生效 。 

这 个 顺序 的 记忆 口 记 是 “LoVe/HAte”(“ 爱 / 恨 ”)， 即 link( 链接 )、visited ( 访问 )、hover 
( 甚 停 )、active (激活 )。 注 意 ， 如 果 将 一 个 选择 右 的 优先 级 改 得 跟 其 他 的 选择 帮 不 一 样 ， 这 个 规 
则 就 会 遭 到 破坏 ， 可 能 会 市 来 音 想 不 到 的 结果 。 


2. 层 芭 值 

浏览 硕 莹 循 三 个 步 又 ， 即 来 源 、 优 和 匈 级 、 源 码 顺 序 ， 来 解析 网 页 上 每 个 元 素 的 每 个 属性 。 如 
末 一 个 声明 在 层 琶 中 “胜出 ”， 它 就 被 称 作 一 个 层 靶 值 。 元 素 的 每 个 属性 最 多 只 有 一 个 层 登 值 。 
网 页 上 一 个 特定 的 段落 (<p> ) 可 以 有 一 个 上 外 边 距 和 一 个 下 外 边 距 ， 但 是 不 能 有 两 个 不 同 的 上 
外 边 距 或 两 个 不 同 的 下 外 边 距 。 如 果 CSS 为 同一 个 属性 指定 了 不 同 的 值 ， 层 车 最 终 会 选择 一 个 
值 来 演 染 元 系 ， 这 就 是 层 合 值 。 


用 





















































» 


如 条 一 个 元 系 上 始终 没有 指定 一 个 属性 ,这 个 属性 就 没有 层 奏 值 。 还 是 拿 丘 


沙 举 例 , 可 能 就 


失 


没有 指定 的 边框 或 者 内 边 距 。 
1.1.4 ”两 条 经 验 法 则 
你 可 能 知道 ， 处 理 层 每 时 有 两 条 通用 的 经 验 法 则 。 因 为 它们 很 有 用 ， 所 以 提 一 下 。 
(1) 在 选择 器 中 不 要 使 用 ID。 就 算 只 用 一 个 ID ,也 会 大 幅 提 升 优先 级 。 当 需要 履 盖 这 个 选择 


俩 时 ， 通 第 找 不 到 为 一 个 有 意义 的 ID， 于 是 丈 会 复制 原来 的 选择 各 ,然后 加 上 为 一 个 类 ， 让 它 
区 别 于 想 要 窗 六 的 选择 右 。 











1.2 继承 1 > 








不 要 使 用 1imoortant。 它 比 ID 更 难 间 芋 ， 一 旦 用 了 它 ， 想 要 葵 关 原 先 的 声明 ,， 训 省 和 中 
再 加 上 一 个 !important， 而 且 依 然 要 处 理 优先 级 的 问题 。 

这 两 条 规则 是 很 好 的 建议 , 但 不 必 固 守 它 们 ， 因 为 也 有 例外 。 不 要 为 了 万 得 优先 级 苑 赛 而 习 
惯性 地 使 用 这 两 个 方法 。 

















关于 重要 性 的 一 个 重要 提醒 
当 创 建 一 个 用 于 分 发 的 JavaScript 模块 ( 比如 NPM 包 ) 时 , 强烈 建议 尽量 不 要 在 JavaScript 
里 使 用 行内 样式 。 如 果 这 样 做 了 ， 就 是 在 强 连 使 用 该 包 的 开发 人 员 要 么 全 盘 接 受 包 里 的 样式 ， 
要 么 给 每 个 想 修改 的 属性 加 上 !important。 
正确 的 做 法 是 在 包 里 包含 一 个 样式 表 。 如 果 组 件 需 要 频繁 修改 样式 ,通常 最 好 用 JavaScript 
给 元 素 添 加 或 者 移 除 类 。 这 样 用 户 就 可 以 在 使 用 这 份 样式 表 的 同时 , 在 不 引入 优先 级 竞赛 的 前 
提 下 ， 按 照 自 己 的 喜好 选择 编辑 其 中 的 样式 。 


过 去 几 年 涌现 了 一 些 实践 方法 ,能 够 帮助 我 们 管理 选择 器 优先 级 。 第 9 章 将 详细 介绍 这 些 方 
法 ， 包 括 如 何 处 理 优先 级 ， 以 及 在 哪里 可 以 放心 使 用 !1important。 现 在 你 已 经 掌握 了 层 炙 的 原 
理 ， 接 下 来 将 介绍 继承 。 








1.2 ”继承 








还 有 最 后 一 种 给 元 素 添 加 样式 的 方式 : 继承 。 经常 有 人 会 把 层 三 跟 继承 混 消 。 虽然 两 者 相关 ， 
但 是 应 该 分 别 理解 它们 。 

如 末 一 个 元 系 的 茶 个 属性 没有 层 登 值 ， 则 可 能 会 继承 菏 个 祖先 元 系 的 值 。 比 如 通常 会 给 
<bodqy> 元 素 加 上 font-family, 里 面 的 所 有 人 祖先 元 素 都 会 继承 这 个 字体 ， 就 不 必 给 页 面 的 每 个 
元 素 明 确 指定 字体 了 。 图 1-8 展示 了 继承 是 如 何 顺 着 DOM 树 疝 下 传递 的 。 



























<header> <main> 


图 1-8 继承 属性 从 DOM 树 的 父 节 点 传递 到 后 代 节 点 
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但 不 是 所 有 的 属性 都 能 锌 继承。 默认 情 况 下 ， 只 有 特定 的 一 些 属性 能 被 继承 ， 通 第 是 我 们 
希望 被 继承 的 那些 。 它 们 主要 是 跟 文 本 相关 的 属性 : color、 font、 font-family、font-size、 


font-weight、 font-variant、 font-style、 line-height,、 letter-spacing、 text-align.、 








exb-1ndert、 te tranmne torm EEC 有 WOEa=eoaeiniaes 

还 有 一 些 其 他 的 属性 也 可 以 被 继承 ， 比 如 列表 属性 : list-style、1list-style-type、 
list-style-position 以 及 list-style-image。 表 格 的 边框 属性 porder-collapse 和 
border-spacing 也 能 被 继承 。 注 章 ， 这 些 属性 控制 的 是 表格 的 边框 行为 ， 而 不 是 律 用 于 指定 
非 表 格 元 素 边 框 的 属性 。( 怒 怕 没 人 希望 将 一 个 <div> 的 边框 传递 到 每 一 个 后 代 元 率 。) 以 上 为 不 
完全 枚 举 ， 但 是 已 经 很 详尽 了 。 

我 们 可 以 在 适当 的 场景 使 用 继承 。 比 如 给 body 元 素 应 用 字体 ， 让 后 代 元 素 继承 该 字体 ( 如 
图 1-9 所 示 )。 
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网 1-9 给 body 应 用 font-family， 让 所 有 的 后 代 元 素 继承 相同 的 值 
将 代码 清单 1-13 加 到 你 的 样式 表 开 头 ， 在 网 页 中 使 用 继承 。 
代码 清单 1-13 ”在 父 元 素 上 添加 font-family 


body { 
font-family: sans-serif; 和 继承 属性 也 会 作用 于 








} 后 代 元 素 


将 属性 加 到 body 上 会 在 整个 网 页 上 生效。 而 将 属性 加 到 特定 元 系 上 ， 则 只 会 被 它 的 后 代 元 
系 继承 。 继 承 属性 会 顺序 传递 给 后 代 元 素 ， 直 到 它 被 层 大 值 履 兰 。 








使 用 开发 者 工具 
当 属 性 值 被 继承 和 徐 盖 时 ， 这 个 路 径 会 很 难 追 踪 。 如 果 你 还 不 熟悉 浏览 器 的 开发 者 工具 ， 
请 开始 养 成 使 用 它们 的 习惯 。 
使 用 开发 者 工具 能 够 看 到 哪些 元 素 应 用 了 哪些 样式 规则 ,以 及 为 什么 应 用 这 些 规则 。 层 党 
和 继承 都 是 抽象 的 概念 ,使 用 开发 者 工具 是 最 好 的 追踪 方式 .在 一 个 页 面 元 素 上 点 击 和 鼠标 右键 ， 
选择 弹出 菜单 上 的 检查 元 素 ， 就 能 打开 开发 者 工具 ， 示 例如 下 所 示 。 
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Filter 


eLement ,styLe { 志 行内 样式 
} 





.footer a { style.css:52 
color: inherit; 


a: link { style,.css:5 
: : ; 层 登 值 
被 覆盖 的 值 } 
ai:-webkit-any=-Link { user agent stylesheet 
EeLerF: 一 webkit 一 hk 
cursor: auto; 
text-decoration:P UnderLine 
} 
Inherited from footer,footer 
,footer { style.css:;48 
£96ter 一 国 #6888} 
Inherited from body 
body 1 style.css:1 
font-family: Helvetica, Arial, sans—serif; 继承 值 





样式 检查 器 显示 了 所 检查 元 素 的 每 个 选择 器 , 它们 根据 优先 级 排列 。 在 选择 器 下 方 是 继承 
属性 。 元素 所 有 的 层 到 和 继承 一 目 了 然 。 

有 很 多 细节 可 以 帮助 开发 人 员 和 青 清 楚 一 个 元 素 的 样式 是 怎么 产生 的 。 靠 近 顶 部 的 样式 会 履 
盖 下 面 的 样式 。 被 覆盖 的 样式 上 划 了 删除 线 。 右 侧 显示 了 每 个 规则 集 的 样式 表 和 行 号 ， 你 可 以 
在 源 代码 中 找到 它们 。 这 样 就 能 准确 判断 哪个 元 素 继承 了 哪些 样式 以 及 这 些 样式 的 来 源 。 还 可 
以 在 顶部 的 筛选 框 中 选择 特定 的 声明 ， 同 时 隐藏 其 他 声明 。 


1.3 ”特殊 值 


有 两 个 特殊 值 可 以 赋 给 任意 属性 ， 用 于 控制 层 合 : inherit 和 initial。 我 们 来 看 看 这 两 
个 特殊 值 。 


1.3.1 使 用 inherit 关 键 字 


有 时 ， 我 们 想 用 继承 代 蔡 一 个 层 合 值 。 这 时 候 可 以 用 inherit 关键 字 。 可 以 用 它 来 履 兰 万 
一 个 值 ， 这 样 该 元 素 就 会 继承 其 父 元 素 的 值 。 

假设 我 们 要 给 网 页 加 上 一 个 浅 灰色 的 页 脚 ,。 在 页 脚 上 有 一 些 链 接 , 但 我 们 不 而 望 这 些 链 接 大 
显眼 ， 因 为 页 脚 不 是 网 页 的 重点 。 因 此 要 将 页 脚 的 链接 变 成 深 灰 色 ( 如 图 1-10 所 示 )。 
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图 1-10 继承 了 灰色 文本 颜色 的 “Terms of use” 链 接 
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将 代码 清单 1-14 加 入 到 网 页 的 部 。 通 党 在 页 涉 和 页 脚 之 间 会 有 更 多 内 容 ， 我 们 为 了 演示 省 
略 了 这 些 内 容 。 


代码 清单 1-14 “ 带 链 接 的 页 脚 
<footer class="footer"> 
&cCcopy; 2016 Wombat Coffee Roasters &mdash; 
<a href="/terms-of-use">Terms of use</a> 





</footer> 


通常 我 们 会 给 网 页 的 所 有 链接 加 上 一 个 字体 颜色 ( 如 果 不 加 的 话 ， 就 会 以 用 户 代 理 样 式 为 
准 )， 这 个 黄色 也 会 作用 于 页 脚 的 “Terms of use” 链 接 。 为 了 让 页 脚 的 链接 变 成 灰色 ， 需 要 履 访 
颜色 值 。 将 代码 清单 1-15 添加 到 你 的 样式 表 。 


代码 清单 1-15 ” ”inherit 值 


a:link { 








Color: blue; 全 局 的 网 页 

} 链接 颜色 

.footer { 
ee a 页 脚 的 文本 
ac Tun CoOolor: #ccc; | 设置 为 灰色 
Padding: 1l5px 0; 
text-align: center; 
font-size: 14px; 

} 

.footer a { 
GOLGOLS. 工作 人 全 下 于 巧 > 从 页 脚 继承 
text-decoration: underline; 文本 颜色 


l 


第 三 个 规则 集 窗 兹 了 蓝 色 的 链接 色 ， 让 页 脚 链接 的 层 芋 值 为 inherit。 因 此 ， 它 继承 了 父 
元 系 <footer> 的 颜色 。 

这 么 做 的 好 处 是 ， 如 末 页 脚 发 生 任 何 样 式 改变 的 话 ( 比如 修改 第 二 个 规则 集 , 或 者 被 别 的 样 
式 铸 产 )， 页 脚 链接 的 颜色 就 会 跟 春 页 脚 其 他 内 容 一 起 改变 。 比 如 ， 当 页 脚 文 本 变 为 更 深 的 灰色 
时 ， 其 中 的 链接 也 会 跟着 改变 。 

还 可 以 使 用 inherit 关键 字 强 制 继承 一 个 通常 不 会 被 继承 的 属性 ， 比 如 边框 和 内 边 距 。 通 
党 在 实践 中 很 少 这 么 做 ,但 是 第 3 革 介 绍 盒 模 型 时 ， 你 会 看 到 一 个 实际 用 例 。 


1.3.2 ”使 用 initial 关 键 字 


有 了 时， 你 需要 撤销 作用 于 某 个 元 素 的 样式 。 这 可 以 用 initial 关键 字 来 实现 。 每 一 个 CSS 
属性 都 有 初始 (默认 ) 值 。 如 果 将 initial 值 赋 给 某 个 属性 ， 那 么 就 会 有 效 地 将 其 重 置 为 默认 
值 ， 这 种 操作 相当 于 硬 复位 了 该 值 。 图 1-11 展示 了 给 页 脚 链接 赋 以 initial 而 不 是 inherit 
时 的 效果 。 
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图 1-11 默认 的 颜色 值 为 黑色 


图 1-11 对 应 的 CSS 如 代码 清单 1-16 所 示 。 因为 在 大 多 数 浏 览 器 中 , 黑色 是 color 属性 的 初 
始 值 ， 所 以 color: initial 等 价 于 color: pblack。 





代码 清单 1-16 _ initial 值 
.footer a { 
color: initial; 
text-decoration: underline; 


} 

这 人 么 做 的 好 处 是 不 需要 思考 太 多 。 如 果 想 删除 一 个 元 系 的 边框 , 设置 porder: initial 即 
可 。 如 末 想 让 一 个 元 系 恢复 到 默认 完 度 ,设置 wiagth: initial 即 可 。 

你 可 能 已 经 习惯 了 使 用 auto 来 实现 这 种 重 置 歼 果 。 实 际 上 ,用 width: auto 是 一 样 的 ， 
因为 wigth 的 默认 值 就 是 auto。 

但 是 要 注意 ，auto 不 是 所 有 属性 的 默认 值 ， 对 很 多 属性 来 说 其 至 不 是 合法 的 值 。 比 如 
border=Wwidths avute 和 padding: auto 是 非法 的 ， 因此 不 会 生效 。 可 以 花 点 时 间 人 研究 一 下 
这 些 属性 的 初始 值 ， 不 过 使 用 initial 更 简单 。 




















说 明 声明 display: initial 等 价 于 display: inline。 不 管 应 用 于 哪 种 类 型 的 
元 素 ， 它 都 不 会 等 于 display: block。 这 是 因为 initial 重 置 为 属性 的 初始 值 ， 而 
不 是 元 素 的 初始 值 。inline 才 是 display 属性 的 初始 值 。 


人 /rr 区 
1.4 简写 属性 
简 与 属性 是 用 于 同时 给 多 个 属性 赋值 的 属性 。 比 如 font 是 一 个 简写 属性 ， 可 以 用 于 设置 多 
种 字体 属性 。 它 指定 了 fort StyLe fort=weldit TONEE=eLE fontsHeohE 以 大 
font-familyo 
font: italic bold 1l8px/1.2 "Helvetica", "Arial", sans-serif,; 
还 有 如 下 属性 。 


口 packground 是 多 个 背景 属性 的 简写 属性 : packground-color、background-image、 


background-size、background-repeat、lbackground-position、background-origin、 





background-chip 以 及 backdrounad-attachment。 

DD porder 起 border-width、 border-style 以 及 border-color 的 简写 属性 ， 而 这 几 
个 属性 也 都 是 简写 属 性 。 

口 porder-width 是 上 、 右 、 下 、 左 四 个 边框 宽度 的 简写 属性 。 

简写 属性 可 以 让 代码 简洁 明了 ,但 是 也 隐藏 了 一 些 怪异 行为 。 
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1.4.1 简写 属性 会 默默 履 盖 其 他 样式 


大 多 效 简 写 属 性 可 以 省 略 一 些 值 ， 只 指定 我 们 关注 的 值 。 但 是 有 要 知 直 ,这 样 做 仍然 会 设置 省 
略 的 值 ， 即 它们 会 被 隐 式 地 设置 为 初始 值 。 这 会 默默 履 盖 在 其 他 地 方 定 义 的 样式 。 比 如 ， 如 果 给 
网 页 标题 使 用 简写 属性 font 时 ,省 略 font-weight， 那么 字体 粗细 就 会 被 设置 为 normal (如 
图 1-12 所 示 )。 
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图 1-12 ”简写 属性 会 设置 省 略 值 为 其 初始 值 
将 代码 清单 1-17 加 入 样式 表 ， 可 以 看 到 效果 ， 
代码 清单 1-17 人 简写 属性 指定 了 所 有 相关 的 值 
hi 4 


font-weight: bold; 
} 











.title { 
font: 32px Helvetica, Arial, sans-serif; 


} 


乍 一 看 可 能 会 党 得 <nh1 class="title"> 会 将 标题 加 粗 ， 但 结果 不 是 。 代 码 清单 1-17 等 价 
于 代码 清单 1-18。 


代码 清单 1-18 与 代码 清单 1-17 中 的 简写 属性 等 价 的 展开 属性 
h 
0 bold; 
} 





.title { 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 这 些 属性 的 初始 值 
font-stretch: normal; 
line-height: normal; 
font-size: 32px; 








font-family: Helvetica, Arial, sans-serif.; 


} 


给 <n1> 添 加 这 些 样式 会 显示 成 普通 的 字体 ， 而 不 是 加 粗 的 字体 。 这 些 样式 也 会 覆盖 从 祖先 
元 素 继承 的 字体 样式 。 在 所 有 的 简写 属性 里 ，font 的 问题 最 严重 ,因为 它 设 置 的 属性 值 太 多 了 。 
因此 ,要 避免 在 <bodqy> 元 素 的 通用 样式 以 外 使 用 font 。 当 然 ， 其 他 简写 属性 也 可 能 会 遇 到 一 样 
的 问题 ， 因 此 要 当心 。 


1.4.2 ”理解 简 与 值 的 顺序 
简写 属性 会 尽量 包容 指定 的 属性 值 的 顺序 。 可 以 设置 porder: 1px solidq black 或 者 
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border: black 1px solid， 两 者 都 会 生效 。 这 是 因为 浏览 饥 知 道 宽 度 、 颜 色 、 边 框 样式 分 别 
对 应 什么 类 型 的 值 。 

但 是 有 很 多 属性 的 值 很 模糊 。 在 这 种 情况 下 ,， 值 的 顺序 很 关键 。 理 解 这 些 简 写 属 性 的 顺序 很 
重要 。 


1. 上 、 右 、 下 、 堪 

当 遇 到 像 margin、padding 这 样 的 属性 ， 还 有 为 元 素 的 四 条 边 分 别 指定 值 的 边框 属性 时 ， 
开发 者 容易 和 弄 错 这 些 简 写 属 性 的 顺序 。 这 些 属性 的 值 是 按 顺 时 针 方向 ， 从 上 边 开 始 的 。 

记 住 顺序 能 少 犯错 误 。 它 的 记忆 口诀 是 TRouBLe: top( 上 )、right( 右 )、 bottom( 下 )、left( 左 )。 

用 这 个 口诀 给 元 素 设 置 四 边 的 内 边 距 。 如 图 1-13 所 示 的 链接 ， 上 内 边 距 为 10px， 右 内 边 距 
为 13px， 下 内 边 距 为 0, 左 内 边 距 为 5px。 里 然 这 些 内 边 距 看 起 来 不 是 很 均匀 ,但 是 可 以 说 明 简 


写 属性 的 顺序 。 


图 1-13” 元素 每 个 方 同 的 内 边 距 都 不 一 样 
代码 清单 1-19 展示 了 这 些 链接 的 CSS。 
代码 清单 1-19 ”指定 元 素 每 个 方 呵 的 内 边 距 


.Nav a { 








Color: white; 


background-color: #13a4ad4,; 上 、 右 、 下 、 左 内 边 距 
padding: 10px 15DX 0 Spx; 


border-radius: 2px; 
text-decoration: none; 


} 


Le 如 采 声 明 结束 时 四 个 属性 值 还 剩 一 个 没 指定 , 没有 指定 的 一 
边 会 取 其 对 边 的 值 。 指 定 三 个 值 时 , 左边 和 右边 都 会 使 用 第 二 个 值 。 指定 两 个 值 时 ， 上边 和 下 边 会 
使 用 第 一 个 值 。 如 末 只 指定 一 个 值 ， 那 么 四 个 方向 部 会 使 用 这 个 值 。 因 此 下 面 的 声明 都 是 等 价 的 。 


padding: lem 2em; 

















padding: lem 2em lem; 





padding: lem 2em lem 2em; 


下 面 的 声明 也 是 等 价 的 。 





padding: lem; 
padding: lem lem; 





padding: lem lem lem; 





padding: lem lem lem lem; 


对 很 多 开发 人 员 而 言 ， 比 较 难 的 是 指定 三 个 值 时 。 记 住 ， 这 种 情况 指定 了 上 、 右 、 下 的 值 。 
因为 没有 指定 左边 的 值 ， 所 以 它 会 取 与 右边 相等 的 从 。 第 二 个 值 就 会 作用 到 左边 和 右边 。 因 此 
padding: 10px 15px 0 是 设置 左右 内 边 踊 为 1Spx, 于 内 边 中 为 10px, 下 内 边 踊 为 0。 











不 过 , 大 多 数 情况 只 需要 指定 两 个 值 。 尤 其 对 于 较 小 的 元 系 , 左右 的 内 边 距 最 好 大 于 上 下 内 
边 距 。 这 种 样式 很 适合 网 页 的 按钮 或 者 导航 链接 ( 如 图 1-14 所 示 )。 
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图 1-14 很 多 元 素 在 水 平方 回 的 内 边 距 较 大 会 更 好 看 些 


按照 代码 清单 1-20 更 新 样式 表 。 它 使 用 简写 属性 先 给 重 直 方向 加 上 内 边 距 ， 再 给 水 平方 向 
加 上 内 边 距 


代码 清单 1-20 ”指定 两 个 内 边 距 
.Nav a { 
color: white; 
background-color: #13a4ad4,; 


padding: 5DxX 15px; 
border-radius: 2px; 上 下 内 边 距 ， 然 后 
text-decoration: none; 是 左右 内 边 距 


) 
为 很 多 属性 遵循 这 个 顺序 ， 所 以 最 好 记 住 它 。 


2. 水 平 、 垂 直 

“TRouBLe” 口 诀 只 适用 于 分 别 给 盒子 设置 四 个 方 回 的 值 的 属性 。 还 有 一 些 属性 只 文 持 最 多 
指定 两 个 值 ， 这 些 属性 包括 packground-position、box-shadow、text-shadow (虽然 严格 
来 讲 它 们 并 不 是 简写 属性 )。 这 些 属性 值 的 顺序 跟 padaaing 这 种 四 值 属性 的 顺序 刚好 相反 。 比 
如 ，padding: lem 2em 先 指 定 了 和 对 直方 回 的 上 /下 属性 但， 然后 才 是 水 平方 同 的 右 / 左 属性 值 ， 
而 background-position: 25% 75g 则 先 指 定 水 平方 同 的 右 / 左 属性 仁 ， 然 后 才 是 垂 百 方 回 的 
上 /下 属性 值 。 

虽然 看 起 来 顺序 相反 的 定义 违背 了 百 党 ， 原 因 却 很 和尚 单 : 这 两 个 值 代表 了 一 个 笛 卡 儿 网 格 。 
省 卡 儿 网 格 的 测量 值 一 般 是 按照 局 7《〈 水 平 ， 垂 直 ) 的 顺序 来 的 。 比 如 ， 如 图 1-15 所 示 ， 要 给 元 
素 加 上 一 个 阴影 ， 就 要 先 指 定 x(〈 水 平 ) 值 。 





























图 1-15 盒 阴 影 的 位 置 为 10px 2px 


这 个 元 系 的 样式 如 代码 清单 1-21 所 示 。 
代码 清单 1-21 box-shadow 先 指定 x 值 再 指定 y 值 


.nav .featured { 


background-color: orange; 明 影 向 右 偏 移 10px， 
box-shadow: 10px 2px #6f9090; 向 下 含 移 2px 


} 


一 个 ( 较 大 的 ) 值 指定 了 水 平方 向 的 仿 移 量 , 第 二 个 ( 较 小 的 ) 值 指定 了 垂直 方向 的 仿 移 量 。 
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如 有 果 属 性 知 要 指定 从 一 个 点 出 发 的 两 个 方向 的 值 ， 束 想 想 “ 备 卡 儿 网 格 "。 如 果 属 性 需要 指 
定 一 个 元 素 四 个 方 回 的 值 ， 就 想 想 “ 时 钟 ”。 





1.5 总 结 
口 控制 选择 需 的 优先 级 。 
口 不 要 混 消 层 琶 和 继承 。 
口 某 些 属性 会 被 继承 ， 包 括 文本 、 列 表 、 表 格 边框 相关 的 属性 。 
口 不 要 混淆 initial 和 auto 值 。 
口 简写 属性 要 注意 TRouBLe 的 顺序 ， 避 免 踩 坑 。 
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本 章 概要 

口 相对 单位 的 广泛 用 途 
口 使 用 em 和 rem 

口 使 用 视 口 的 相对 单位 


口 介绍 CSS 变量 








说 起 给 属性 指定 值 ,CSS 提供 了 很 多 选项 。 人 们 了 最 束 悉 同时 也 最 简单 的 应 该 是 像素 单位 (px )。 
它 是 绝对 单位 ， 即 5px 放 在 哪里 都 一 样 大 。 而 其 他 单位 ， 如 em 和 rem， 就 不 是 绝对 单位 ， 而 是 
相对 单位 。 相 对 单位 的 值 会 根据 外 部 因素 发 生变 化 。 比 如 ，2em 的 具体 值 会 根据 它 作用 到 的 元 素 
(有 时 甚至 是 根据 属性 ) 而 变化 。 因 此 相对 单位 的 用 法 更 难 笃 握 。 

开发 人 员 ， 即 便 是 经 验 丰富 的 CSS 开发 人 员 ， 通 稼 也 不 愿意 使 用 相对 单位 ， 包 括 经 篆 提 到 
的 em。em 值 变化 的 方式 使 其 难以 预测 ， 不 如 像素 简单 明了 。 本 章 将 揭 开 相对 单位 的 神秘 面纱 。 
站 和 完 我 会 解释 相对 单位 给 CSS 市 来 的 独特 价值 ， 并 帮助 你 理解 它们 。 我 会 解释 它们 的 工作 原理 ， 
然后 展示 如 何 控制 其 看 似 不 可 预测 的 性 质 。 相 对 单位 可 以 为 我 们 所 用 , 用 得 恰当 的 话 , 它们 会 让 
代码 更 简洁 、 更 灵活 ， 也 更 简单 。 


2.1 相对 值 的 好 处 


CSS 为 网 页 市 来 了 后 期 绑 定 (late-binding ) 的 样式 : 直到 内 容 和 样式 都 完成 卫 ， 二 者 才 会 结 
合 起 来 。 这 会 给 设计 流程 增加 复 末 性 ， 而 这 在 其 他 类 型 的 图 形 设计 中 是 不 存在 的 。 不 过 这 也 市 来 
了 好 处 ， 即 一 个 样式 表 可 以 作用 于 成 百 上 千 个 网 页 。 此 外 ， 用 户 还 能 直接 改变 最 终 的 泻 染 效果 ， 
比如 用 户 可 以 改变 默认 字号 或 者 缩放 浏览 需 窗 口 。 

在 早期 的 计算 机 应 用 开发 程序 (以 及 传统 的 出 版 行业 ) 中 ,开发 人 员 (或 者 出 版 商 ) 明确 知 
道 其 媒介 的 限制 。 一 个 典型 的 程序 窗口 可 能 宽 400px、 高 300px， 一 个 页 面 可 能 是 宽 4 英寸 ”、 
高 6.5 英寸 。 因 此 ， 当 开发 人 员 设 置 应 用 程序 的 按钮 和 文字 布局 时 ， 他 们 能 精确 地 知道 元 素 在 屏 
幕 上 的 大 小 和 留 给 其 他 元 素 的 空间 。 在 网 页 上 ， 一 切 都 变 了 。 






































QO@ 1 英寸 约 合 2.54 厘米 。 一 一 编者 注 


2.1 相对 值 的 好 处 25 


2.1.1 那些 年 追求 的 像素 级 完美 


在 Web 环境 下 ， 用 户 可 以 设置 浏览 右 窗 口 的 大 小 ， 而 CSS 必须 适应 这 种 窗口 大 小 。 此 外 ， 
当 网 页 打开 后 ， 用 户 还 可 以 缩放 网 页 ，CSS 还 需要 适应 新 的 限制 。 也 就 是 说 ,不 能 在 刚 创建 网 页 Bo 
时 就 应 用 样式 ， 而 是 等 到 要 将 网 页 泻 染 到 屏幕 上 时 ， 才 能 去 计算 样式 。 
这 给 CSS 增加 了 一 个 抽象 屋 。 我 们 无 法 根据 理想 的 条 件 给 元 素 添加 样式 ， 而 是 要 设置 无 论 
元 素 处 于 任意 条 件 ， 都 能 够 生效 的 规则 。 现 在 的 Web 环境 下 ， 网 页 需要 既 可 以 在 4 英寸 的 手机 
屏幕 上 演 染 ， 也 可 以 在 30 英寸 的 大 屏幕 上 党 染 。 
在 很 长 时 间 里 ， 网 页 设计 者 通过 聚焦 到 “像素 级 完美 ”的 设计 来 降低 这 种 复杂 性 。 他 们 会 创 
建 一 个 紧凑 的 容器 ,通常 是 居中 的 一 栏 ， 大约 800px 宽 。 然 后 再 像 之 前 的 本 地 应 用 程序 或 者 印刷 
出 版 物 那样 ， 在 这 些 限 制 里 面 进行 设计 。 


2.1.2 ”像素 级 完美 的 时 代 终 结 了 


随 春 技术 的 发 展 ， 加 上 制造 商 推出 高 清 显 示 俘 ， 像 系 级 完美 的 方式 逐渐 走 同 了 终点 。 在 21 
世纪 初 ,很 多 人 开始 讨论 是 否 可 以 安全 地 将 网 页 宽度 设计 成 1024px， 而 不 是 800px。 随 后 ， 人 们 
又 开始 讨论 同样 的 话题 ， 是 否 要 将 网 页 宽度 设计 成 1280px。 当 时 我 们 得 做 出 选择 ， 到 底 是 让 网 
页 宽 于 旧 计 算 机 ， 还 是 罕 于 新 计算 机 。 

等 到 智能 手机 出 现 后 , 开发 人 员 再 也 无 法 假 厂 每 个 用 户 访问 网 站 的 体验 都 能 一 样 。 不管 我 们 
避 欢 与 否 ， 必 得 抛弃 以 前 那 种 固定 客 度 的 栏目 设计 ， 开 始 考 虑 响应 式 设计 。 我 们 无 法 逃避 CSS 
市 来 的 抽象 性 。 我 们 得 拥抱 它 。 






























































响应 式 在 CSS 中指 的 是 样式 能 够 根据 浏览 器 窗口 的 大 小 有 不 同 的 “响应 ” 。 这 
要 求 有 意 地 考虑 任何 尺寸 的 手机 、 平 板 设备 ， 或 者 桌面 屏幕 。 第 8 章 会 详细 介绍 响 


应 式 设 计 ， 但 本 章 会 先 普及 一 些 重 要 的 基础 知识 。 








CSS 带 来 的 抽象 性 也 带 来 了 额外 的 复杂 性 。 如 果 给 一 个 元 素 设置 800px 的 宽度 , 在 小 窗口 下 
会 是 什么 样 ? 水 平 菜 单 如 有 果 无 法 在 一 行 显示 会 是 什么 样 ? 在 号 CSS 的 时 候 ， 我们 既 要 考虑 整体 
性 ， 也 要 考虑 差异 性 。 当 有 很 多 方法 解决 同一 个 问题 时 ， 我 们 要 选择 能 够 兼顾 更 多 情况 的 方法 。 

相对 单位 就 是 CSS 用 来 解决 这 种 抽象 的 一 种 工具 。 我 们 可 以 基于 窗口 大 小 来 等 比例 地 缩放 
字号 ， 而 不 是 固定 为 14px， 或 者 将 网 页 上 的 任何 元 又 的 大 小 都 相对 于 基础 字 吕 来 设置 ， 然 后 只 用 
改 一 行 代码 就 能 缩放 整个 网 页 。 下 面 来 看 看 CSS 是 如 何 实现 这 些 功能 的 。 





























像素 、 点 、 派 卡 
CSS 支持 几 种 绝对 长 度 单位 ， 最 常用 、 最 基础 的 是 像素 (px )。 不 常用 的 绝对 单位 是 mm 
(毫米 )、cm (厘米 )、in (英寸 ) pt (点 ， 印 刷 术 语 ，1/72 英寸 ) pc( 派 卡 ， 印 刷 术 语 ， 
12 点 )。 这些 单 位 都 可 以 通过 公式 互相 换算 : 1in=25.4mm==2.54cm=6pc=72pt=96px。 因 此 ， 
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16px 等 于 12pt ( 16/96x72 )。 设 计 师 经 常用 点 作为 单位 ， 开 发 人 员 则 习惯 用 像素 。 因 此 跟 设计 
师 沟通 的 时 候 需 要 做 一 些 换算 。 

像素 是 一 个 具有 误导 性 的 名 称 ，CSS 像素 并 不 严格 等 于 显示 器 的 像素 ,尤其 在 高 清 屏 ( 视 
网 膜 屏 ) 下 。 尽 管 CSS 单位 会 根据 浏览 器 、 操 作 系 统 或 者 硬件 适当 缩放 ， 在 某 些 设备 或 者 用 
户 的 分 辨 率 设置 下 也 会 发 生变 化 ， 但 是 96px 通常 等 于 一 个 物理 英寸 的 大 小 。 


2.2 em 和 rem 











em 是 最 第 见 的 相对 长 度 单 位 ， 适 合 基于 特定 的 字号 进行 排版 。 在 CSS 中 ，lem 等 于 当前 元 
系 的 字 写 ， 其 准确 值 取 决 于 作用 的 元 系 。 图 2-1 是 一 个 内 边 距 为 lem 的 div 元 系 。 


We have built partnerships with small farms around the world to hand-select beans at the peak of 
season. We then carefully roast in small batches to maximize their potential. 





图 2-1 内 边 距 为 lem 的 元 系 ( 虚线 用 于 展示 内 边 距 ) 


它 的 代码 如 代码 清单 2-1 所 示 。 规 则 集 指定 了 字号 为 16px, 也 就 是 元 素 局 部 定义 的 lem。 然后 
使 用 em 指定 了 元 素 的 内 边 距 。 将 代码 清单 2-1 加 入 一 个 新 的 样式 表 ， 在 <div class="padded"> 
中 写 一 些 文字 ， 在 浏览 絮 中 看 看 会 是 什么 效果 。 


代码 清单 2-1 用 em 单位 设置 内 边 距 











.paddeqd { 
font-size: 16px; 设置 四 个 内 边 距 
padding: lem; 为 font-size 


| 

这 里 设置 内 边 距 的 值 为 1em。 浏 览 病 将 其 乘 以 字号 ， 最 终 渔 染 为 16px。 这 一 点 很 重要 : 浏 
虹 需 会 根据 相对 单位 的 值 计 算出 绝对 什 ， 称 作 计 算 值 (computed value )。 

在 本 例 中 ,设置 内 边 距 为 2em， 会 产生 一 个 32px 的 计算 值 。 如 果 另 一 个 选择 器 也 命中 了 相 
同 的 元 素 ， 并 修改 了 字号 ， 那 么 就 会 改变 em 的 局 部 含义 ， 计 算出 来 的 内 边 距 也 会 随 之 变化 。 

当 设 置 padding、 height、 width、border-radius 等 属性 时 ， 使 用 em 会 很 方便 。 这 是 
因为 当 元 素 继承 了 不 同 的 字号 ， 或 者 用 户 改 变 了 字体 设置 时 ， 这 些 属 性 会 跟 独 元 系 均 义 地 缩放 。 

图 2-2 展示 了 两 个 不 同 大 小 的 盒子 ， 它 们 的 字号 、 内 边 跑 和 圆 角 都 会 不 一 样 。 




















Small Large 








图 2-2 ”元 素 的 内 边 距 和 圆 角 都 是 相对 信 
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在 定义 这 些 盒子 的 样式 时 ,可 以 用 em 指定 内 边 距 和 圆 角 。 给 每 个 元 素 设 置 lem 的 内 边 距 和 
加 角 ， 再 分 别 指定 不 同 的 字号 ， 那 么 这 些 属性 会 随 着 字体 一 起 缩放 。 

如 代码 清单 2-2 所 示 ， 在 HTML 中 创建 两 个 盒子 。 给 元 站 分 别 添 加 box-small 和 lbox-large 
类 名 ， 作 为 大 小 修饰 符 。 


代码 清单 2-2 ”给 不 同 的 元 素 加 上 em ( HTML ) 
<span class="box box-small">Small</span> 
<span class="box box-large">Large</span> 


现在 将 代码 清单 2-3 加 到 样式 表 中 。 这 段 代 码 用 em 定义 了 一 个 盒子 ， 同 时 定义 了 一 个 small 
和 一 个 large 的 修饰 符 ， 分 别 指定 不 同 的 字号 。 


代码 清单 2-3 将 em 应 用 于 不 同 的 元 素 〈CSS ) 
el bd 
padding: lem; 





border-radius: lem; 
background-color: lightgray; 
} 


.box-small { 
font-size: 12px; 


, 不 同 的 字号 ， 可 以 决定 


元 素 的 em 值 


.box-large { 
font-size: 18px; 
} 
这 就 是 em 的 好 处 。 可 以 定义 一 个 元 系 的 大 小 ， 然 后 只 需要 改变 字号 就 能 整体 缩放 元 素 。 稍 
后 会 再 举 一 个 例子 ， 在 此 之 前 ， 我 们 先 说 说 em 和 字号 。 











2.2.1 使 用 em 定义 字号 


谈 到 font-size 属性 时 ，em 表现 得 不 太一 样 。 之 前 提 到 过 ， 当 前 元 素 的 字号 决定 了 em。 
但 是 ， 如 果 声 明 font-size: 1.2em， 会 发 生 什 么 呢 ? 一 个 字号 当然 不 能 等 于 肯 己 的 1.2 倍 。 实 
际 上 ， 这 个 font-size 是 根据 继承 的 字号 来 计算 的 。 

举 个 人 简单 的 例子 。 如 图 2-3 所 示 ， 有 两 段 文字 ,分 别 有 不 同 的 凶 号 。 可 以 像 代码 清单 2-4 那 
样 定 义 元 素 ， 然 后 使 用 em 定义 字号 。 











We love coffee 
| We love coffee 
图 2-3 使 用 em 定义 两 种 不 同 的 字号 


按照 代码 清单 2-4 修改 网 页 。 第 一 行文 字 在 <body> 标 签 中 ， 因 此 它 会 按照 body 的 字号 来 泻 
染 。 第 二 上 段 的 slogan 继承 了 这 个 字号 。 
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代码 清单 2-4 使 用 相对 font-size 的 标记 


<body> 
We love coffee 
<p class="slogan">We love coffee</p> 


slogan 继承 了 <body> 
的 字号 
</body> 
代码 清单 2-5 指定 了 元 素 的 字号 。 人 简单 起 见 , 这 里 用 像素 单位 。 接 下 来 使 用 em 来 放大 slogan 
的 字号 。 
代码 清单 2-5 使 用 em 定义 font-size 
body { 


font-size: 16px; 


} 








.Slogan Ce gj di 
计算 结果 为 元 素 继承 的 
font-size: 1.2em; 2 A 
字号 的 1.2 售 


) 


slogan 的 指定 字号 是 1.2em。 为 了 得 到 计算 的 像素 值 ， 需要 参考 继承 的 字号 ， 即 16px。 因 为 
16x1.2 = 19.2， 所 以 计算 值 为 19.2px。 











提示 。 如 果 知 道 字 号 的 像素 值 ， 但 是 想 用 em 声明 ， 可 以 用 一 个 简单 的 公式 换算 : 用 想 
要 的 像素 大 小 除 以 父 级 ( 继承 ) 的 像素 字号 。 比 如 ， 想 要 一 个 10px 的 字体 ， 元 素 继承 
的 字体 是 12px， 则 计算 结果 是 10/12 = 0.8333em。 如 果 想 要 一 个 16px 的 字体 ， 父 级 字 
号 为 12px， 则 计算 结果 是 16/12 = 1.3333em。 在 本 章 我 们 还 会 进行 几 次 这 样 的 计算 。 


了 解 这 些 非常 有 用 。 对 大 多 数 浏 览 絮 来 说 ， 上 默认 的 字号 为 16px。 准 确 地 说 ，medaiunm 关键 字 
的 值 是 16px。 


1. em 同时 用 于 字号 和 其 他 属性 

现在 你 已 经 用 em 定义 了 字号 (基于 继承 的 学 号 )， 而 且 也 用 em 定义 了 其 他 属性 ， 比 如 
padding 和 border-radius (基于 当前 元 系 的 字号 )。em 的 复杂 之 处 在 于 同时 用 它 指定 一 个 元 
素 的 字号 和 其 他 属性 。 这 时 , 浏览 器 必须 先 计 算 字 号 , 然后 使 用 这 个 计算 值 去 算出 其 余 的 属性 值 。 
这 两 类 属性 可 以 拥有 一 样 的 声明 值 ， 但 是 计算 值 不 一 样 。 

在 前 面 的 例子 里 ， 字 号 的 计算 值 为 19.2px (继承 值 16px 乘 以 1.2em )- 图 2-4 展 示 了 相同 的 
slogan 元 系 ， 但 是 内 边 距 为 1.2em， 硼 景 为 灰色 ， 这 样 能 明显 地 看 到 内 边 距 的 大 小 。 内 边 距 比 字 
号 稍微 大 一 些 ， 尽 管 它们 的 声明 值 相 同 。 






































We love coffee 


图 2-4 字号 为 1.2em 和 内 边 距 为 1.2em 的 元 素 
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这 是 因为 该 段 沙 从 body 继承 了 16px 的 字号 ， 最 终 字 号 的 计算 值 为 19.2px。 因 此 19.2px 是 
em 的 局 部 值 ， 用 于 计算 内 边 距 。 按 照 代码 清单 2-6 更 新 测试 页 面 的 样式 表 。 


代码 清单 2-6 使 用 em 定义 font-size 和 padding 
body { 
font-size: 16px; 


} 计算 值 为 19.2px 
.Slogan { 
font-size: 1.2em; 计算 值 为 23.04px 


padding: 1.2em; 
background-color: #ccc; 


} 


在 这 个 例子 里 ，padding 的 声明 值 为 1.2em， 乘 以 19.2px ( 当前 元 素 的 字号 )， 得 到 计算 值 
为 23.04px。 尽 管 font-size 和 padding 的 声明 值 相同 ， 计 算 值 却 不 一 样 。 


2. 字体 缩小 的 问题 

当 用 em 来 指定 多 重 租 套 的 元 系 的 字号 时 ， 就 会 产生 意外 的 绪 有 末 。 为 了 算出 每 个 元 系 的 准确 
值 ， 就 需要 知道 继承 的 字号 ， 如 打 这 个 值 是 在 父 元 素 上 用 em 定义 的 ， 就 需要 知道 父 元 素 的 继承 
值 ， 以 此 类 推 , 就 会 沿 着 DOM 树 一 直 往 上 查找 。 

当 使 用 em 给 列表 元 系 定义 字号 并 且 多 级 舱 套 时 ， 这 个 问题 就 显现 出 来 了 。 绝 大 部 分 Web 开 
发 人 员 曾 遇 到 过 类 似 于 图 2-5 的 现象 。 文 字 缩 小 了 ! 正 是 这 种 问题 让 开发 人 员 惯 怕 使 用 em。 



































e。 Top level 


o Second level 


" Third level 


=m Fourth level 
sa Fifth level 


图 2-5 骸 僚 列表 的 文字 缩小 了 


当 列 表 多 级 藤 侠 并 且 给 每 一 级 使 用 em 定义 字号 时 , 就 会 发 生 文字 缩小 的 现象 。 代码 清单 2-7 
和 代码 清单 2-8 的 例子 里 ， 设 置 无 序列 表 的 字号 为 0.8em。 选 择 带 选中 了 网 页 上 每 个 <u1> 元 素 ， 
此 当 这 些 列表 从 其 他 列表 继承 字号 时 ，em 就 会 逐渐 缩小 字 扎 。 


代码 清单 27 使 用 em 指定 列表 的 字号 
body { 
font-size: 16px; 


} 








计 业 和 
font-sizZze: .8em; 


; 
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代码 清单 2-8” 藤 套 列 表 
<ul> 
<1i>Top level] 








中 ， 继 承 它 的 字号 


<uUul> 
<li>Second level 


< > | 这 个 其 套 在 上 一 个 列表 中 ， 继 
承 第 二 个 列表 的 字号 


/mR 


<l1i>Third level 











<ul> 
<l1li>Fourth level \ 以 此 类 推 


<ul> 
<1i>Fifth level</1i> 

/LS 

</11i> 

YULS 
</11i> 
LS 
</11i> 
/LS 
</11i> 
</ul> 


每 个 列表 元 素 的 字号 等 于 0.8 乘 以 其 父 元 素 的 字号 。 算 出 来 第 一 级 列表 的 字号 为 12.8px， 第 
二 级 缩小 到 10.24px ( 12.8px x 0.8 )， 第 三 级 缩小 到 8.192px， 以 此 类 推 。 同 理 ， 如 果 指 定 一 个 大 
于 lem 的 字号 ,文字 会 逐渐 增 大 。 我 们 想 要 的 是 指定 顶部 的 字号 ， 然 后 保持 子 级 的 字号 一 致 ， 
如 图 2-6 所 示 。 























e。 Top level 
o Second level 
nm Third level 
ma Fourth level 
m Fifth level 


图 2-6 文字 大 小 正确 的 般 套 列表 


实现 这 种 效果 的 代码 如 代码 清单 2-9 所 示 。 它 设置 第 一 级 列表 的 字体 为 0.8em ( 跟 代码 清 
单 2-7 一 致 ) 代码 清单 2-9 里 的 第 二 个 选择 俘 选 中 了 能 套 在 某 个 无 序列 表 中 的 所 有 无 序列 表 , 也 
怠 是 除了 顶级 列表 以 外 的 其 他 列表 。 藤 套 列 表 的 字号 等 于 其 父 级 的 字号 ， 如 图 2-6 所 示 。 


代码 清单 2-9 纠正 文字 缩小 的 问题 
ul { 
font-size: .8em; 


y 

















ul ul { 
font-size: lem; 


) 
这 样 确 实 解 决 了 问题 ,尽管 这 个 方式 不 完美 。 设置 一 个 值 , 然后 马上 用 为 一 个 规则 覆盖 。 如 
末 不 用 提升 选择 表 的 优 和 多 级 来 履 兰 规则， 就 更 好 了 。 


岗 套 的 列表 应 当 跟 其 父 级 
的 字号 一 致 
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这 些 例 子 告诉 我 们 ， 如 采 不 小 心 的 话 ，em 就 会 变 得 难以 各 驱 。em 用 在 内 边 距 、 外 边 距 以 及 
元 系 大 小 上 很 好 ， 但 是 用 在 字号 上 就 会 很 复 淋 。 值 得 庆 竺 的 是 ， 我 们 有 更 好 的 选择 : rem。 














\ 几 Se rc 号 


2.2.2 ”使 用 rem 设置 字号 


当 浏 览 硕 解析 HIML 文档 时 ,会 在 内 存 里 将 页 面 的 所有 元 系 表 示 为 DOM (文档 对 象 模型 )。 
它 是 一 个 树 绪 构 ， 其 中 每 个 元 素 都 由 一 个 节点 表示 。<html> 元 素 是 项 级 ( 根 ) 市 点 。 它 下 面 是 
子 世 点，<headq> 和 <boqy>。 有 再 下 面 是 逐 级 般 套 的 后 代 节 点 。 

在 文档 中 ， 根 世 点 是 所 有 其 他 元 系 的 祖先 点 。 根 世 点 有 一 个 伪 类 选择 硕 〈 :root )， 可 以 
用 来 选中 它 目 己 。 这 等 价 于 类 型 选择 硕 html ， 但 是 html 的 优先 级 相当 于 一 个 类 名 ， 而 不 是 一 
个 标签 。 

rem 是 root em 的 缩写 。rem 不 是 相对 于 当前 元 系 ， 而 是 相对 于 根 元 条 的 单位 。 不 管 在 文档 
的 什么 位 置 使 用 rem，1.2rem 都 会 有 相同 的 计算 值 : 1.2 乘 以 根 元 条 的 字号 。 代 码 清 单 2-10 先 指 
定 了 根 元 素 的 字号 ， 然 后 用 rem 定义 了 无 序列 表 的 相对 字号 。 


:root { | 
font-size: lem; :root 伪 类 等 价 于 类 型 
} 选择 器 html 


Wd 
Font=sli28r Sore 使 用 浏览 器 的 默认 
} 字号 (16px) 
在 这 个 例子 里 , 根 元 素 的 字号 为 浏览 带 默 认 的 字号 16px ( 根 元 素 上 的 em 是 相对 于 浏览 硕 黑 
认 值 的 ) 无 序列 表 的 字号 设置 为 0.8rem， 计算 值 为 12.8px。 因 为 相对 根 元素 ， 所 以 所 有 字 扎 始 
终 一 怪 ， 束 算是 向 侠 列 表 也 一 样 。 





















































可 访问 性 : 对 字号 使 用 相对 单位 
有 些 浏览 器 给 用 户 提 供 了 两 种 方式 来 设置 文字 大 小 :缩放 操作 和 设置 默认 字号 。 按 住 Ctrl+ 
或 Ctrl-， 用 户 可 以 缩放 网 页 。 这 种 操作 会 缩放 所 有 的 字 和 图 片 ， 让 网 页 整体 放大 或 者 缩小 。 
在 某 些 浏览 器 中 ， 这 种 改变 只 会 临时 对 当前 标签 页 生效 ， 不 会 将 缩放 设置 带 到 新 的 标签 页 。 
设置 默认 字号 则 不 一 样 。 不 仅 很 难 找 到 设置 默认 字号 的 地 方 ( 通常 在 浏览 器 的 设置 页 )， 
而 且 用 这 种 方式 改变 字号 会 永久 生效 ,除非 用 户 再 次 修改 默认 值 , 这 种 方式 的 缺点 是 , 它 不 会 
影响 用 px 或 者 其 他 绝对 单位 设置 的 字号 。 由 于 默认 的 字号 对 茶 些 用 户 而 言 很 重要 ， 尤 其 是 对 
视力 受 损 的 人 ， 所 以 应 该 始终 用 相对 单位 或 者 百分比 设置 字号 。 


与 em 相 比 ，rem 降低 了 复杂 性 。 实 际 上 ，rem 结合 了 px 和 em 的 优点 ， 既 保留 了 相对 单位 
的 优势 ， 又 简单 易 用 。 那 是 不 是 应 该 全 用 rem， 抛 弃 其 他 选择 呢 ? 答案 是 否定 的 。 
在 CSS 里 , 答 采 通常 是 “看 情况 ”。rem 只 是 你 工具 包 中 的 一 种 工具 。 和 擎 握 CSS 很 重要 的 一 
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点 是 学 会 在 适当 的 场景 使 用 适当 的 工具 。 我 一 般 会 用 rem 设置 字号 , 用 px 设置 边框 , 用 em 设置 
其 他 大 部 分 属性 ， 尤 其 是 内 边 距 、 外 边 距 和 圆 角 (不 过 我 有 时 用 百分比 设置 容 磊 宽度 )。 

这 样 字 号 是 可 预测 的 ,同时 还 能 在 其 他 因素 改变 元 素 字 号 时 , 借助 em 缩放 内 外 边 距 。 用 px 
定义 边框 也 很 好 用 ,尤其 是 想 要 一 个 好 看 又 精致 的 线 时 。 这 些 是 我 在 设置 各 种 属性 时 篆 用 的 单位 ， 
但 它们 仅仅 是 工具 ， 在 某 些 情况 下 ， 用 其 他 工具 会 更 好 。 


提示 拿 不 准 的 时 候 ， 用 rem 设 置 字 号 ， 用 px 设置 边框 ， 用 em 设置 其 他 大 部 分 属性 。 























2.3 停止 像素 思维 


过 去 几 年 有 一 个 常见 的 模式 ,更 准确 地 说 是 反 模 式 , 就 是 将 网 页 根 元 素 的 字号 设置 为 0.625em 
或 者 62.5%( 如 代码 清单 2-11 所 示 )。 


代码 清单 2-11 反 模 式 : 全 局 重 置 font -size 为 10px 
html { 
font-size: .625em; 


) 

我 不 推荐 这 样 写 。 代 码 清 单 2-11 将 浏览 硕 的 默认 字号 16px 缩小 为 10px。 这 的 确 能 简化 计算 : 
如 果 设 计 师 希望 字号 为 14px， 那 么 只 需要 默默 在 心里 除 以 10， 写 上 1.4rem 就 可 以 了 ， 而 且 还 使 
用 了 相对 单位 。 

一 开始 ， 这 会 很 方便 ， 但 是 这 样 有 两 个 缺点 。 第 一 ， 我 们 被 迫 写 很 多 重复 的 代码 。10px 对 
大 部 分 文字 来 说 太 小 了 ， 所 以 需要 窗 盖 它 ， 最 后 就 得 给 段落 设置 1.4rem， 给 侧 边栏 设置 1.4rem， 
给 导航 链接 设置 1.4rem， 等 等 。 这 样 一 来 ， 代 码 容 易 出 错 的 地 方 更 多 ; 当 需 要 修改 代码 时 ， 要 改 
动 的 地 方 更 多 ; 样式 表 的 体积 也 更 大 。 

第 二 , 这 种 做 法 的 本 质 还 是 像素 思维 。 虽然 在 代码 里 写 的 是 1.4rem, 但 是 在 心里 仍然 想 着 “14 
像素 ”。 在 响应 式 网 页 中 ， 需 要 习惯 “模糊 ” 值 。1.2em 到 底 是 多 少 像素 并 不 重要 ， 重 点 是 它 比 
继承 的 字号 要 稍微 大 一 点 。 如 果 在 屏幕 上 的 效果 不 理想 ， 就 调整 它 的 值 ， 反 复试 验 。 这 种 方式 同 
样 适 用 于 像素 值 。( 在 第 13 章 中 ， 我 们 将 进一步 研究 具体 规则 来 改进 这 种 方法 。) 

使 用 em 时 ,很 容易 陷入 沉思 : 到 底 计算 出 来 的 像素 值 是 多 少 ， 尤 其 是 用 em 定义 字号 时 。 
你 会 不 停 地 做 乘法 和 除法 来 计算 em 的 值 ， 直 到 抓 狂 。 相 反 , 我 建议 先 适应 使 用 em。 如 有 果 已 经 习 
惯 了 像素 ， 那 么 使 用 em 可 能 需要 反复 练习 ， 但 这 一 切 是 值得 的 。 

这 并 不 意味 着 永远 不 能 用 像素 。 如 果 是 跟 设 计 师 沟通 ， 可 能 就 需要 讨论 具体 的 像素 值 ， 这 没 
问题 。 在 项 目 之 初 ， 需 要 确定 基本 的 字号 (通常 是 标题 和 脚注 的 第 用 字号 )。 讨论 大 小 的 时 候 用 
绝对 值 更 简单 。 

将 大 小 转换 成 rem 需要 计算 ， 记 得 随手 囊 一 个 计算 右 。( 我 会 在 Mac 上 按 Command-Space 
键 ， 在 Spotlight 里 输入 算式 。) 给 根 元 条 设置 了 字号 后 ， 就 定义 了 一 个 rem。 在 这 之 后 ， 应 该 只 
在 少数 特殊 情况 下 使 用 像素 ， 而 不 能 经 党 使 用 。 
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我 在 本 章 会 继续 提 太 像 系 ,方便 解释 相对 单位 的 行为 ， 以 及 帮 你 熟悉 em 的 计算 。 在 本 章 之 
后 ， 我 将 主要 使 用 相对 单位 讨论 字号 。 


2.3.1 设置 一 个 合理 的 默认 子 号 


如 果 你 希望 默认 字号 为 14px， 那 么 不 要 将 默认 字体 设置 为 10px 然后 再 覆盖 一 届 ， 而 应 该 直 
接 将 根 元 系 字 号 设置 为 想 要 的 值 。 将 想 要 的 值 除 以 继承 值 〈 在 这 种 情况 下 为 浏览 需 默 认 值 ) 是 
14/16， 等 于 0.875 。 

将 代码 清单 2-12 加 入 到 一 个 新 的 样式 表 中 ， 作 为 基础 样式 。 代 但 清单 2-12 设置 了 根 元 素 
(<html> ) 的 默认 字体 。 


代码 清单 2-12 ”设置 真正 的 稚 认 字号 
0 4 | 使 用 HTML 选择 器 


Son se Mab em 14/16〈 理 想 的 px/ 继 承 
: 的 px) =0.875 


现在 你 已 经 给 网 页 设置 了 想 要 的 字号 , 不 用 在 其 他 地 方 再 指定 一 遍 了 。 你 只 需要 相对 它 去 修 
改 其 他 元 素 ( 比如 标题 ) 的 字号 。 
接 下 来 创建 一 个 如 图 2-7 所 示 的 面板 。 基 于 根 元 素 的 14px 字号 , 用 相对 单位 来 构建 这 个 面板 。 

















SINGLE-ORIGIN 


We have built partnerships with small farms around the world to hand-select 
beans at the peak of season. We then carefully roast in small batches to maximize 
their potential. 


图 2-7 使 用 相对 单位 和 一 个 继承 字号 创建 的 面板 
面板 的 HTML 标记 如 代码 清单 2-13 所 示 ， 将 其 添加 到 网 页 中 。 
代码 清单 2-13 面板 的 HIML 标记 


<div class="panel"> 
<h2>Single-origin</h2> 
<div class="panel-body"> 
We have built partnerships with small farms around the world to 
hand-select beans at the peak of season. We then carefully roast 
in <a href="/batch-size">small batches</a> to maximize their 
potential. 
</div> 
</div> 


代码 清单 2-14 是 面板 的 样式 代码 。 这 里 用 em 设置 内 边 距 和 圆 角 ， 用 rem 设置 标题 的 字号 ， 
用 px 设置 边框 。 将 以 下 代码 添加 到 你 的 样式 表 中 。 
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代码 清单 2-14 使 用 相对 单位 创建 的 面板 


.panel { 
padding: lem; /| 用 em 设置 内 边 距 和 圆 角 
border-radius: 0.5em; 


border: lpx solid #999; 


. “ | 用 1px 设置 一 条 细 边 
.panel > h2 { 将 面板 项 部 的 多 余 空间 移 除 ， 
margin-top: 0; 第 3 章 会 对 此 详细 解释 


font-size: 0.8rem; 
font-weight: bold; 
text-transform: uppercase; 


上 


用 rem 设置 标题 
的 字号 





代码 清单 2-14 给 面板 的 四 周 加 上 了 细 边 ， 并 给 标题 指定 了 样式 。 我 创建 了 一 个 较 小 的 标题 ， 
同时 将 字体 加 粗 ， 全 大 写 。( 如 果 设 计 需 要 的 话 ， 可 以 改 成 更 大 的 字号 ， 或 者 其 他 字体 。) 

第 二 个 选择 天 里 的 > 是 一 个 直接 后 代 组 合 器 。 它 选中 了 .panel 元 素 的 一 个 h2 子 元 素 。 有 关 
选择 希 和 组 合 带 的 完整 参考 资料 ， 参 见 附录 A。 

在 代码 清单 2-13 中 ， 给 面板 主体 添加 panel-body 类 只 是 为 了 明确 含义 ,在 CSS 中 并 未 用 
到 。 因 为 这 个 元 系 已 经 继承 了 根 元 系 的 字号 ， 所 以 它 看 起 来 就 是 理想 的 杆子 ， 不 需要 窗 畜 。 


2.3.2 ”构造 响应 式 面 板 


观 进 一 步 地 说 ,我们 其 至 可 以 根据 屏 磋 玉 寸 ,用 媒体 查询 改变 根 元 系 的 字号 。 这 样 束 能 够 基 
于 不 同 用 户 的 屏 旨 尺寸 ， 泻 染 出 不 同 大 小 的 面板 ( 如 图 2-8 所 示 )。 









































媒体 查询 ， 即 emeaia 规则 ， 可 以 指定 菜 种 屏幕 尺寸 或 者 媒体 类 型 ( 比如， 打印 机 
或 者 屏幕 ) 下 的 样式 。 这 是 响应 式 设 计 的 关键 部 分 。 这 里 以 代码 清单 2-15 为 例 进 


行 说 明 ， 第 8 章 将 更 深入 地 介绍 媒体 查询 。 
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图 2-8 ”不同 屏幕 尺寸 下 的 响应 式 面板 : 300px (左上 )、800px (右上 )、1440px (下 ) 
按照 代码 清单 2-15 修改 你 的 样式 表 。 
代码 清单 2-15 ”响应 式 的 根 元 素 font-size 
:root { 


font-size: 0.75em; 作用 到 所 有 的 屏幕 , 但 是 
} 在 大 屏 上 会 被 覆盖 
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@Qmedia (min-width: 800px) { 


:IOOt { ee 
font-size: 0.875em; 仅 作用 到 宽度 800px 及 其 以 
} 上 的 屏幕 ， 覆 蔓 之 前 的 值 


】 


@Qmedia (min-width: 1200px) { 


:Foot { 仅 作用 到 宽度 1200px 及 
font-size: Tem; 其 以 上 的 屏幕 ， 覆 盖 前 面 
} 两 个 值 


} 


第 一 个 规则 集 指定 了 一 个 较 小 的 默认 字号 , 这 是 希望 在 小 屏幕 上 显示 的 字号 。 然 后 使 用 媒体 
查询 覆盖 该 值 ， 在 800px、1200px 以 及 更 大 的 屏幕 上 逐渐 增 大 字号 。 

通过 给 页 面 根 元 素 设 置 不 同 字 号 ， 我 们 响应 式 地 重新 定义 了 整个 网 页 的 em 和 rem。 也 就 是 
说 ， 即 使 不 直接 修改 面板 的 样式 ， 它 也 是 啊 应 式 的 。 在 小 屏 上 ， 比 如 智能 手机 上 ， 字 体会 较 小 
(12px )， 内 边 距 和 圆 角 也 相应 较 小 。 在 大 于 800px 和 1200px 的 大 屏 上 ， 组 件 会 相应 地 分 别 放大 
到 14px 和 16px 的 字号 。 缩 放 浏 览 磺 窗口 可 以 看 到 这 些 变化 。 

如 果 你 足够 严格 , 整个 网 页 的 样式 都 像 这 样 使 用 相对 单位 定义 , 那么 网 页 就 会 根据 视 口 大 小 
整体 缩放 。 这 是 啊 应 式 策 略 中 很 重要 的 一 部 分 。 徘 近 样 式 表 顶 部 的 两 个 媒体 查询 可 以 极 大 减少 后 
续 CSS 代码 中 媒体 查询 的 数量 。 如 果 用 像素 的 话 ， 就 没有 这 么 容易 。 

同样 ， 如 果 老 板 或 者 客户 觉得 网 页 的 字体 太 大 或 者 太 小 ,只 需要 改 一 行 代 但 就 能 改变 整体 的 
字号 ， 进 而 不 费 吹 灰 之 力 影 响 整 个 网 页 。 


2.3.3 缩放 单个 组 件 


有 时 ， 雳 要 让 同一 个 组 件 在 页 面 的 某 些 部 分 显示 不 同 的 大 小 ， 你 可 以 用 em 来 单独 缩放 一 个 
组 件 。 拿 之 前 的 面板 举例 。 首先 给 面板 加 上 一 个 large 2 CLasss= "Oanel large" ys 

图 2-9 展示 了 普通 面板 和 大 面板 的 区 别 。 效 末 类 似 于 啊 应 式 面 板 , 但 是 同一 个 页 面 可 以 同时 
存在 两 种 大 小 。 
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We have built partnerships with small farms around the world 
to hand-select beans at the peak of season. We then carefully 
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图 2-9 同一 个 页 面 里 的 普通 面板 和 大 面板 
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下 面 稍微 改 一 下 定义 面板 字号 的 方式 。 我 们 仍然 使 用 相对 单位 , 但 是 需要 改变 它 相 对 的 对 象 。 
首先 ， 给 每 个 面板 添加 父 元 素 声 明 font-size: 1rem， 这 样 无 论 面 板 位 于 页 面 何 处 ， 都 有 一 个 
可 预测 的 学 号 。 

其 次 , 改 用 em 而 不 是 用 rem, 重新 定义 标题 的 字号 , 使 其 相对 于 刚刚 在 lrem 时 创建 的 父 元 
素 的 字号 。 用 代码 清单 2-16 所 示 的 代码 ， 更 新 你 的 样式 表 。 


代码 清单 2-16 创建 一 个 大 面板 











.banel { 
font-size: lrem; 
padding: lem; 给 组 件 设置 一 个 可 预测 
border: lpx solid #999; 的 字号 


border-radius: 0.5em; 


} 


.banel] > h2 { 


mee EoD 0 用 em 定义 其 他 字号 , 使 其 


font-size: 0.8em; 去 主 Se 
font-weight: boldgd; 相对 于 父 元 素 的 字号 


text-transform: uppercase; 


} 

这 次 修改 并 不 会 影响 面板 的 样式 , 但 是 它 为 创建 更 大 的 面板 做 好 了 准备 : 只 需要 加 一 行 CSS 
代码 ， 即 履 瑚 父 元 系 的 lrem。 因 为 组 件 内 所 有 的 大 小 都 是 相对 于 父 元 对 的 字号 ， 所 以 窗 冀 后 ， 
整个 面板 的 大 小 都 会 改变 。 将 代码 清单 2-17 添加 到 你 的 样式 表 中 ， 定 义 一 个 更 大 的 面板 。 


代码 清单 2-17 用 一 个 CSS 声明 放大 整个 面板 


.banel.large { | ee 
ae 1 .2rem; 复合 选择 器 选中 同时 拥有 panel 
} 和 large 类 的 元 素 


现在 对 普通 面板 使 用 class="panel"， 对 大 面板 使 用 class="panel large"。 同 理 ， 可 
以 设置 一 个 更 小 的 字号 来 定义 一 个 小 面板 ,如果 面 板 是 一 个 更 复杂 的 组 件 , 有 多 个 字号 和 内 边 距 ， 
仍然 只 需要 一 个 声明 就 能 缩放 它 ， 只 要 内 部 的 样式 都 使 用 em 定义 即 可 。 


2.4 视 口 的 相对 音 位 


前 面 介 绍 的 em 和 rem 都 是 相对 于 font-size 定义 的 , 但 CSS 里 不 止 有 这 一 种 相对 单位 。 
还 有 相对 于 浏览 硕 视 口 定义 长 度 的 视 口 的 相对 单位 。 





























如 采 你 不 翼 悉 视 口 的 相对 单位 ， 请 先 看 下 面 的 简单 介绍 。 


口 vh: 视 口 高 度 的 1/100。 
口 vwW: 视 口 宽度 的 1/100。 
口 vmin: 视 口 宽 、 


则 取决 于 宽度 。 


图 2-10 展示 了 一 个 正方 形 元 素 在 不 同 屏 噬 太 才 的 视 口中 的 样子 。 它 的 宽度 和 凯 度 都 是 


2.4 


视 口 的 相对 单位 


高 中 较 小 的 一 方 的 /100 (IE9 中 叫 vm， 而 不 是 vmin )。 
口 vmax: 视 口 宽 、 高 中 较 大 的 一 方 的 /100 (本 书写 作 时 IE 和 Edge 均 不 支持 vmax ) "。 
比如 ，50vw 等 于 视 口 宽度 的 一 半 ，25Svh 等 于 视 口 高 度 的 23%。vmin 取决 于 宽 和 高 中 较 小 的 

一 方 ， 这 可 以 保证 元 素 在 屏幕 方向 变化 时 适应 屏幕 。 在 横 屏 时 ，vmin 取决 于 高 度 ; 在 竖 屏 时 ， 


90vmin， 等 于 宽 高 的 较 小 边 的 90%， 即 横 屏 高 度 的 90%， 或 者 竖 屏 宽度 的 90%。 





图 2-10” 当 一 个 元 素 的 宽 和 高 为 90vmin 时 ， 不 管 视 口 的 大 小 或 者 方向 是 什么 ， 
总 会 显示 成 一 个 稍 小 于 视 口 的 正方 形 


代码 清单 2-18 是 该 元 素 的 CSS 样式 。 它 生成 了 一 个 大 正方 形 ， 不 管 如 何 缩放 浏览 











能 在 视 口中 显示 。 可 以 在 网 页 里 加 上 上 <div class="sgquare"> 来 看 效果 。 


代码 清单 2-18 用 vmin 定义 正方 形 元 素 的 大 小 
.Square { 
width: 90vmin; 
height: 90vmin,; 
background-color: #369; 
} 


译 者 注 





Q 翻译 本 书 时 Edge 已 支持 vmax。 
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视 口 相对 长 度 非常 适合 展示 一 个 填 满 屏 间 的 大 图 。 我 们 可 以 将 图 片 放 在 一 个 很 长 的 容 硕 里 
然后 设置 图 片 的 高 度 为 100vh， 让 它 等 于 视 口 的 高 度 。 


提示 。 相对 视 口 的 单位 对 大 部 分 浏览 器 而 言 是 较 新 的 特性 ， 因 此 当 你 将 它 跟 其 他 样式 
结合 使 用 时 ,会 有 一 些 奇 怪 的 bug。 可 在 CanIUse 网 站 中 检索 Viewport units: vw, vh, vmin， 


vmax 中 的 “Known Issues”。 








CSS3 

本 章 中 有 些 单 位 类 型 在 CSS 早期 版 本 中 没有 ( 尤其 是 rem 和 视 口 的 相对 单位 )， 它 们 是 在 
CSS 发 展 过 程 中 加 进来 的 ， 也 就 是 通常 所 说 的 CSS3。 

20 世纪 90 年 代 末 到 21 世纪 初 ， 在 完成 CSS 规范 的 初始 工作 之 后 的 很 长 一 段 时 间 ，CSS 
几乎 没有 什么 大 的 改变 。1998 年 5 月 ，W3C (万 维 网 联盟 ) 发 布 了 CSS2 规范 。 紧 接着 开始 制 
定 2.1 版本， 对 CSS2 的 问题 和 bug 进行 修正 。CSS2.1 的 制定 工作 持续 了 许多 年 ， 仍 然 没 有 增 
加 重大 的 新 特性 ， 直 到 2011 年 4 月 ， 才 作为 提案 推荐 标准 (Proposed Recommendation ) 发 布 。 
此 时 ， 浏 览 器 已 经 实现 了 CSS2.1 的 大 部 分 特性 ， 并 且 还 以 CSS3 的 名 义 增 加 了 更 多 特性 。 

“3” 是 一 个 非 正 式 的 版 本 号 ， 其 实 并 没有 CSS3 规范 ， 而 是 CSS 规范 分 成 了 单独 的 模块 ， 
每 个 模块 单独 管理 版 本 。 如 今 背 景 和 边框 的 规范 脱离 了 盒 模 型 模块 以 及 层 垣 和 继承 模块 。 这 样 
W3C 就 能 够 制定 CSS 某 个 领域 的 新 版 本 ， 而 不 需要 更 新 其 他 没 变 的 领域 。 很 多 规范 仍然 停留 
在 版 本 3 (现在 称 作 level 3 )， 但 是 有 一 些 规 范 已 经 处 于 level 4， 比 如 选择 器 规范 。 还 有 一 些 
规范 处 于 level1， 比 如 Flexbox。 

随 着 这 些 变 化 的 出 现 ， 我 们 发 现 从 2009 年 到 2013 年 ,新 特性 呈现 了 爆炸 式 发 展 。 在 此 期 
间 值 得 关注 的 新 特性 包括 rem、 视 口 的 相对 单位 ， 以 及 新 的 选择 器 、 媒 体 查 询 、Web 字体 、 圆 
ee 定 颜色 的 不 同方 式 等 。 现 在 每 年 还 在 不 断 地 涌现 新 特性 

也 意味 着 我 们 不 再 只 针对 一 个 特定 版 本 的 CSS 开发 了 。CSS 现在 是 一 个 活 的 标准 ( living 
ee 每 个 浏览 器 在 持续 地 增加 对 新 特性 的 支持 。 开 发 人 员 使 用 这 些 新 特性 ， 并 且 适 应 了 
这 些 变 化 。 未 来 不 会 有 CSS4 了 ， 除 非 人 们 拿 它 作为 一 个 更 通用 的 市 场 术 语 。 虽 然 本 书 和 履 盖 了 
CSS3 的 特性 ， 但 是 我 尽 可 能 不 这 么 称呼 它们 ， 因 为 对 于 Web 来 说 ， 它 们 都 属于 CSS 。 


2.4.1 使 用 vw 定义 字号 


相对 视 口 单位 有 一 个 不 起 眼 的 用 途 , 就 是 设置 字号 , 但 我 发 现 它 比 用 vh 和 vw 设置 元 系 的 宽 
和 高 还 要 实用 。 

如 果 给 一 个 元 素 加 上 font-size: 2vw 会 发 生 什么 ”在 一 个 1200px 的 更 面 显示 逢 上 ， 计 算 
值 为 24px( 1200 的 2% ) 在 一 个 768px 党 的 平板 上 ， 计算 值 约 为 15px (768 的 2% )。 这 样 做 的 
好 处 在 于 元 素 能 够 在 这 两 种 大 小 之 间 平 请 地 过 渡 , 这 意味 者 不 会 在 某 个 断 点 突然 改变 。 当 视 口 大 
小 改变 时 ， 元 素 会 逐渐 过 渡 。 

不 科 的 是 ，24px 在 大 屏 上 来 说 太 大 了 。 更 糟糕 的 是 ， 在 了 Phone 6 上 会 缩小 到 只 有 7.5px。 如 
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末 能 够 保留 这 种 捧 放 的 能 力 ， 但 是 让 极 闪 情况 缓和 一 些 就 更 棒 了 。CSS 的 calc () 图 数 可 以 提供 
帮助 。 


2.4.2 ”使 用 calc() 定 义 字 号 


calel() 国 数 内 可 以 对 两 个 及 其 以 上 的 值 进 行 基 本 运算 。 当 要 结合 不 同 单位 的 值 时 ， Ee 
特别 实用 。 它 文 持 的 运算 包括 : 加 (+)、 减 (--)、 乘 (x)、 除 (=)。 加 号 和 减 号 两 边 必 须 有 空 
白 ， 因 此 我 建议 大 家 养 成 在 每 个 操作 符 前 后 都 加 上 一 个 空格 的 习惯 ， 比 如 calc (lem + 10px)。 

代码 清单 2-19 用 calc () 结 合 了 em 和 vw 两 种 单位 。 删 除 之 前 样式 表 的 基础 字号 〈 以 及 相 
关 的 媒体 查询 )， 换 成 如 下 代码 。 


代码 清单 2-19 用 calc() 结 合 esem 和 vh 两 种 单位 定义 font-size 


:root { 











font-size: calc(0.5em + lvw): 


} 


现在 打开 网 页 ， 慢 慢 缩 放 浏 览 器 ， 字 体会 平滑 地 缩放 。0.5em 保证 了 最 小 字号 ，1vw 则 确保 
了 字体 会 随 着 视 口 缩放 ,这 有 段 代码 保证 基础 字号 从 iPhone 6 里 的 11.75px 一 直 过 渡 到 1200px 的 浏 
览 融 窗口 里 的 20px。 可 以 按照 自己 的 喜好 调整 这 个 值 。 

我 们 不 用 媒体 查询 就 实现 了 大 部 分 的 啊 应 式 策 略 。 省 挥 三 四 个 人 硬 编码 的 断 点 , 网 页 上 的 内 容 
也 能 根据 视 口 流畅 地 缩放 。 


2.5 ”无 单位 的 数值 和 行 高 


有 些 属性 允许 无 单位 的 值 ( 即 一 个 不 指定 单位 的 数 ), 支持 这 种 值 的 属性 包括 1ine-height、 
z-index、font-weight (700 等 于 bold，400 等 于 normal， 等 等 ), 任何 长 度 单 位 (如 pX、em<、 
rem ) 都 可 以 用 无 单位 的 值 0， 因 为 这 些 情 况 下 单位 不 影响 计算 值 ， 即 0px、0%、0em 均 相等 。 

警告 ”一 个 无 单位 的 0 只 能 用 于 长 度 值 和 百分比 ， 比 如 内 边 距 、 边 框 和 宽度 等 ， 而 不 能 

用 于 角度 值 ， 比 如 度 ,， 或 者 时 间 相 关 的 值 ， 比 如 秒 。 

line-height 属性 比较 特殊 ， 它 的 值 既 可 以 有 单位 也 可 以 无 单位 。 通 常 我 们 应 该 使 用 无 单 
位 的 数值 ， 因 为 它们 继承 的 方式 不 一 样 。 我们 在 网 页 中 加 上 一 些 文字 ,看 看 无 单位 的 行 高 会 如 何 
影响 样式 。 将 代码 清单 2-20 诬 加 到 网 页 中 。 
代码 清单 2-20 继承 Line-height 的 标记 


<body> 


























<p Class="about-us"> 
We have built partnerships with small farms around the world to 
hand-select beans at the peak of season. We then carefully roast in 
small batches to maximize their potential. 
</D> 
</body> 





40 第 2 章 ”相对 单位 


i body 元 系 指 定 一 个 行 高 ， 人 允许 它 被 网 页 上 其 他 元 素 继 了 到。 不 管 在 网 页 设置 了 什么 
写 ， 这 种 方式 部 会 按照 预期 显示 ( 如 图 2-11 所 示 )。 


We have built partnerships with 
small farms around the world to 
hand-select beans at the peak of 
season. We then carefully roast In 
small batches to maximize thelr 
potential. 


图 2-11 为 每 个 后 代 元 条 重新 计算 无 单位 的 行 高 


将 代码 清单 2-21 添加 到 样式 表 中 。 这 个 段落 继承 了 行 高 1.2。 因 为 段落 字号 是 32px (2em x 
16px， 浏览 右 默 认 字 号 )， 所 以 此 时 行 高 的 计算 值 为 38.4px (32pxx1.2 )。 每 行文 字 之 间 都 会 有 一 
个 合理 的 间距 。 
代码 清单 2-21 用 无 单位 的 数值 定义 的 行 高 

body { 


line=height: 1;,2; 后 代 元 素 继承 了 
} 无 单位 的 值 


.about-us { 
font-size: 2em; 


} 
如 果 用 有 单位 的 值 定义 行 高 ， 可 能 会 产生 意 想 不 到 的 结果 ， 如 图 2-12 所 示 。 每 行文 字 会 重 
蔡 。 对 应 的 CSS 如 代码 清单 2-22 所 示 。 


可 下 built arband pe 


Sodson t ns 人 a or In 
i ce es to raximizZe elr 
Bi entl | 

















图 2-12 继承 1ine-height， 导 人 致 行 重 笃 


代码 清单 2-22 ”用 有 单位 的 值 定义 行 高 ， 产 生 了 意 想不到 的 结 
boay { i 





line-height: 1.2em; 
, (19.2px) 


.about-us { 
font=Size: 2ems; < 一 一 一 一 计算 值 为 32px 
} 
这 些 结果 源 于 继承 的 一 个 怪异 特性 : 当 一 个 元 素 的 值 定义 为 长 度 ( px、em、rem, 等 等 ) 时 ， 
子 元 素 会 继承 它 的 计算 值 。 当 使 用 em 等 单位 定义 行 高 时 ， 它 们 的 值 是 计算 值 ， 传 递 到 了 任何 继 
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承 子 元 系 上 。 如 朱子 元 系 有 不 同 的 字号 ， 并 且 继承 了 line-height 属性 ， 就 会 造成 意 想 不 到 的 
结 朱 ， 比 如 文字 重 登 。 


长 度 ”一 种 用 于 测量 距离 的 CSS 值 的 正式 称谓 。 它 由 一 个 数值 和 一 个 单位 组 成 ， 


比如 5px。 长 度 有 两 种 类 型 : 绝对 长 度 和 相对 长 度 。 百 分 比 类 似 于 长 度 ， 但 是 严格 
来 讲 ， 它 不 是 长 度 。 





使 用 无 单位 的 数值 时 ， 继 承 的 是 声明 值 ， 即 在 每 个 继承 子 元 系 上 会 重新 算 它 的 计算 值 。 这 样 
得 到 的 结 东 几乎 总 是 我 们 想 要 的 。 我 们 可 以 用 一 个 无 单位 的 数值 给 body 设置 行 启 ， 之 后 就 不 用 
修改 了 ， 除 非 有 些 地 方 想 要 不 一 样 的 行 高 。 


2.6 目 定 义 属性 ( 即 CSS 变量 ) 


2015 年 ， 一 个 期 盼 已 久 的 CSS 规范 作为 候选 推荐 标准 问世 了 ， 叫 作 层 又 变量 的 自 定 义 属性 
( Custom Properties for Cascading Variables )。 这 个 规范 给 CSS 引进 了 变量 的 概念 ， 开 局 了 一 种 全 
新 的 基于 上 下 文 的 动态 样式 。 你 可 以 声明 一 个 变量 ,为 它 赋 一 个 值 ,然后 在 样式 表 的 其 他 地 方 引 
用 这 个 什 。 这 样 不 仅 能 减少 样式 表 中 的 重复 ， 而 且 还 有 其 他 好 处 ， 稍 后 会 介绍 。 
写作 本 书 时 ， 除 了 了 下， 目 定 义 属 性 已 经 得 到 各 大 主流 浏览 硕 的 文 择 。 要 了 解 更 新 更 全 的 情 
请 在 Can TIUse 网 站 中 检索 “CSS Variables”。 




















况 


3 


说 明 ”如 果 刚 好 用 了 内 置 变量 功能 的 CSS 预 处理 器 ， 比 如 Sass 或 者 Less， 你 可 能 就 不 
太 想 用 CSS 变量 了 。 千 万 别 这 样 。 新 规范 里 的 CSS 变量 有 本 质 上 的 区 别 ， 它 比 任何 一 
款 预 处 理 器 的 变量 功能 都 多 。 因 此 我 倾向 于 称 其 为 “ 自 定 义 属 性 ”， 而 不 是 变量 ， 以 强 
调 它 跟 预 处 理 器 变量 的 区 别 。 
要 定义 一 个 目 定 义 属 性 ， 只 需要 像 其 他 CSS 属性 那样 声明 即 可 ， 如 代码 清单 2-23 所 示 。 创 
建 一 个 新 的 网 页 和 样式 表 ， 将 代码 清单 2-23 添加 到 样式 表 中 。 
代码 清单 2-23 ”定义 一 个 目 定义 属性 


:root { 
--main-font: Helvetica, Arial, sans-serif; 


a 


这 个 代码 清单 定义 了 一 个 名 叫 --main-font 的 变量 。 将 其 值 设置 为 一 些 常见 的 sans-serif 字 
体 。 变 量 名 前 面 必须 有 两 个 连 字 符 ( -- )， 用 来 跟 CSS 属性 区 分 ， 剩 下 的 部 分 可 以 随意 命名 。 

变量 必须 在 一 个 声明 块 内 声明 。 这 里 使 用 了 :root 选择 器 ,因此 该 变量 可 以 在 整个 网 页 使 用 ， 
稍 后 会 解释 这 一 点 。 

变量 声明 本 身 什么 也 没 做 , 我 们 使 用 时 才能 看 到 效果 。 将 这 个 变量 用 到 一 个 段落 上， 就 会 产 
生 如 图 2-13 所 示 的 结果 。 








A 
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We have built partnerships with small farms around the world to hand-select 
beans at the peak of season. We then carefully roast in small batches to 
maximize their potential. 


图 2-13 ”该 段落 使 用 了 变量 里 定义 的 sans-serif 字 体 








调用 函数 var () 就 能 使 用 该 变量 。 利 用 该 隐 数 引用 前 面 定 义 的 变量 --main-font。 将 代码 
清单 2-24 里 的 规则 集 添加 到 你 的 样式 表 中 。 


代码 清单 2-24 使 用 日 定义 属性 


:root { 
-main-font: Helvetica, Arial, sans-serif,; 


} 


. : / 将 段落 的 字体 设置 为 Helvetica、 
font-family: var(--main-font).; Arial、sans-serif 
} 、 


在 样式 表 某 处 为 日 定义 属性 定义 一 个 值 ， 作 为 “单一 数据 产 ”"， 人 然后 在 其 他 地 方 复 用 它 。 这 
种 方式 特别 适合 反复 出 现 的 值 , 比如 颜色 值 。 代码 清单 2-25 添加 了 一 个 叫 prand-color 的 目 定 
义 属性 。 在 样式 表 中 可 以 多 次 使 用 这 个 变量 ， 当 你 想 要 改变 这 个 颜色 值 时 ， 只 需要 在 一 个 地 方 修 
改 即 可 。 
代码 清单 2-25 ”使 用 自 定 义 属 性 定义 颜色 
:root { A i 
| 定义 一 个 监 色 的 brand-color 











--main-font: Helvetlca，Arlial，SsSans-Ser1lf， Sd 
--brand-color: #369; 


} 


p { 
font-family: var(--main-font).; 
Color: var(--brand-color).; 


) 

var () 国 数 接受 第 二 个 参数 ， 它 指定 了 备用 值 。 如 果 第 一 个 参数 指定 的 变量 未 定义 ， 那 么 就 
会 使 用 第 二 个 值 。 

代码 清单 2-26 在 两 个 不 同 的 声明 中 都 指定 了 备用 值 。 在 第 一 个 声明 里 ， 因 为 --main-font 
被 定义 为 Helvetica，Arial，sans-serif， 所 以 使 用 了 这 个 变量 的 值 。 在 第 二 个 声明 里 ， 
因为 --secondary-color 是 一 个 未 定义 的 变量 ， 所 以 使 用 了 备用 值 plue。 








代码 清单 2-26 ”提供 备用 值 
:root { 
--main-font: Helvetica, Arial, sans-serif; 
--brand-color: #369; 
} 


- J Foamil Ey if) secondary-color 变量 没有 定 
一 Ty 立 一 -IalDDn- s-serif).; 
义 ， 因 此 会 使 用 备用 值 blue 
Color: var(--secondary-color, blue); 


} 


指定 备用 值 为 sans-serif 
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说 明 如果 var() 函 数 算出 来 的 是 一 个 非法 值 ， 对 应 的 属性 就 会 设置 为 其 初始 值 。 比 
如 果 在 padding: var(--brand-color) 中 的 变量 算出 来 是 一 个 颜色 ， 它 就 是 一 


个 非法 的 内 边 距 值 。 这 种 情况 下 ， 内 边 距 会 设置 为 0。 


2.6.1 动态 改变 自 定义 属性 


在 前 面 的 示例 中 , 目 定 义 属性 只 不 过 为 减少 重复 代码 提供 了 一 种 便捷 方式 , 但 是 它 真 
义 在 于 ,上 自 定 义 属性 的 声明 能 够 层 合 和 继承 : 可 以 在 多 个 选择 带 中 定义 相同 的 变量 ,这 个 ? ee 


网 页 的 不 同 地 方 有 不 同 的 值 。 
例如 ， 可 以 定义 一 个 变量 为 黑色 ,然后 在 某 个 容 右 中 重新 将 其 定义 为 日 色 。 那么 基于 该 变量 


的 任何 样式 ,在 容 表 外 部 会 动态 解析 为 黑色 , 在 容 船 内 部 会 动态 解析 为 朋 色 。 接 下 来 用 这 种 特性 
来 实现 如 图 2-14 所 示 的 效果 。 








SINGLE-ORIGIN 
We have built partnerships with small farms around the world to hand-select beans at 
the peak of season. We then carefully roast in small batches to maximize their 


potential. 





SINGLE-ORIGIN 
We have built partnerships with small farms around the world to hand-select beans 


at the peak of season. We then carefully roast in small batches to maximize their 


potential. 














图 2-14 上 自 定 义 属性 基于 当前 变量 值 ， 产 生 了 两 种 不 同 颜 色 的 面板 
这 个 面板 跟 之 前 的 面板 ( 如 图 2-7 所 示 ) 类 似 。 它 的 HTML 标记 如 代码 清单 2-27 所 示 。 代 
人 码 里 的 面板 有 两 个 实例 ; 一 个 面板 在 body 里 , 还 有 一 个 面板 在 深 色 的 区 域 中 。 按照 代码 清单 2-27 


更 新 HTML。 
同一 个 网 页 中 ,不 同 环境 下 的 两 个 面板 


代码 清单 2-27 
<body> 
<div class="panel"y> J 


<h2>Single-origin</h2> 


<div class="body"> 
We have built partnerships with small farms 


around the world to hand-select beans at the 
Peak of season. We then careful roast jin 


small batches to maximize their potential. 
</div> 
</div> 
<aside class="dark"> 深 色 容器 内 的 
<div class="panel"> 另 一 个 面板 





_ 立 _ 


至 


大 大 
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<h2>Single-origin</h2> 
<div class="body"> 
We have built partnerships with 
around the world to hand-select 
peak of season. We then careful 
small batches to maximize their 
</div> 
</div> 
</aside> 
</body> 





small farms 
beans at the 
roast in 
potential. 


接 下 来 ,用 变量 定义 文字 和 背景 闫 色 ， 进 而 重新 定义 这 个 面板 。 将 代码 清单 2-28 加 入 你 的 

















样式 表 。 这 会 将 育 景色 设置 为 月 色 ,， 将 文字 设置 为 黑色 。 在 实现 涤 色 面 板 之 前 ， 我 乞 解 释 一 下 它 


的 工作 原理 。 
代码 清单 2-28 使 用 变量 定义 面板 颜色 
:root { 
--main-bg: #f£fff; 
--main-color: #000; 
} 
.panel { 
font-size: lrem; 
padding: lem; 
border: lpx solidqd #999; 


0 .5em; 
Var (--main-bg).; 


border-radius: 
background-color: 
Color: var(--main-color); 


} 


.panel] > h2 { 
margin-top: 0; 
font-size: 0.8em; 
font-weight: bold; 
text-transform: upPpercase; 


中 





分 别 将 背景 色 和 文字 颜色 
变量 定义 为 白色 和 黑色 


在 面板 样式 中 
使 用 变量 





站 和 完 还 是 在 :root 选择 六 的 规则 集中 定义 变量 。 这 很 重要 , 如 此 一 来 这 些 值 束 可 以 提供 给 





元 素 〈 整 个 网 页 ) 下 的 任何 元 素 。 当 根 元 系 的 后 代 元 系 使 用 这 个 变量 时 ， 就 会 解析 这 里 的 值 。 


我 们 有 两 个 面板 ,它们 看 起 来 一 样 。 接 下 来 在 为 一 个 选择 途中 重新 定义 这 两 个 变量 。 


代码 清 





单 2-29 定义 了 深 色 容 人 融 的 样式 ， 为 该 容 需 设置 了 次 灰色 背景 ， 
将 代码 清单 2-29 添加 到 样式 表 中 。 


一 


也 重新 定义 了 两 个 变量 。 
代码 清单 2-29 ” 深 色 容 剖 的 样式 


.dark { 
margin-top: 
padding: lem; 


2em; 





还 有 一 些 内 边 距 和 外 边 距 ， 同 时 


给 深 色 容器 和 前 面 的 
面板 之 间 加 上 外 边 距 
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background-color: #999; 
--main-bg: #333; 


--main-color: #fff; 给 深 色 容 器 加 上 
} 深 灰 色 背 景 
在 容器 内 重 定 义 --main-bg 


和 --main-color 变量 


重新 加 载 网 页 ， 会 看 到 第 二 个 面板 有 深 色 背景 和 日 色 文 字 。 这 是 因为 面板 使 用 了 这 些 变量 ， 
它们 会 解析 成 深 色 容 妖 内 定义 的 值 ， 而 不 是 根 元 素 内 定义 的 值 。 注意 ,这 里 并 没有 重新 定义 面板 
人 Oe 

在 本 例 中 ， 总 共 定 义 了 目 定 义 属性 两 次 : 第 一 次 在 根 元 系 上 ( --main-color 为 黑色 )， 
二 次 在 深 色 容 关上 ( --main-color oe 自 定 义 属性 就 像 作用 域 变 量 一 样 ， 因 为 它 ee 
被 后 代 元 素 继承 。 在 深 色 容器 中 ，- -main-color 为 白色 ,在 页 面 其 他 地 方 ， 则 是 黑色 。 











2.6.2 ”使 用 JavaScript 改变 自 定义 属性 


还 可 以 使 用 pa 在 浏览 瘟 中 实时 访问 和 修改 自 定 义 属性 。 本 书 并 不 是 介绍 JavaScript 
的 ， 所 以 只 会 简单 介绍 概念 。 需 要 你 目 己 在 JavaScript 项 目 中 实现 剩 下 的 功能 。 
代码 清单 2-30 展示 了 如 何 访问 一 个 元 素 上 的 属性 。 在 网 页 中 插入 一 个 脚本 ， 该 脚本 记录 了 
根 元 素 的 --main-pbg 属性 值 。 


代码 清单 2-30 ”访问 JavaScript 的 自 定 义 属 性 





<script type="text/javascript"> 获取 一 个 元 素 的 styles 
var rootElement = document .documentElement.; 对 象 
var styles = getComputedStyle (rootElement,) 
var mainColor = styles. i '—--main-bg'); 
console.log(String (mainColor) .trim( 获取 styles 对 象 的 
</script> --main-bg 值 
确保 mainColor 是 一 个 字符 串 ， 并 去 


掉 前 后 空格 ; 打印 结果 为 ‘“#fff” 


因为 你 可 以 实时 改变 目 定 义 属性 的 值 , 所 以 可 以 用 JavaScript 为 --main-bg 动态 设置 一 个 新 
值 。 如 采 将 其 设置 为 浅 蓝 色 ， 效 采 会 如 图 2-15 所 示 。 


SINGLE-ORIGIN 


We have built partnerships with small farms around the world to hand-select beans at 
the peak of season. We then carefully roast in small batches to maximize their potential. 


图 2-1$ _ JavaScript 可 以 通过 改变 --main-bg 变量 的 值 ， 设 置 面 板 的 背景 


代码 清单 2-31 给 根 元 系 上 的 --main-bg 设置 了 一 个 新 值 。 将 这 个 代码 清单 放 到 <script> 
标签 的 末尾 。 
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代码 清单 2-31 使 用 JavaScript 设 置 一 个 自 定义 属性 


Var rootElement = document .documentElement,; i 
1 1 1 1 1 将 根 元 素 上 的 --main-bg 
rootElement .style.setProperty('--main-bg', '#cdf'); NL a AT 
设置 为 浅 监 色 


如 采 运 行 以 上 脚本 ,所 有 继承 了 --main-bg 属性 的 元 条 都 会 更 新 , 使 用 新 的 值 。 在 网 页 中 ， 
第 一 个 面板 的 背景 色 会 改 为 浅 蓝 色 。 第 二 个 面板 保持 不 变 , 因为 它 依然 继承 了 深 色 容 剖 里 的 属性 。 

利用 这 种 技术 ， 就 可 以 用 JavaScript 实时 切换 网 站 主题 ， 或 者 在 网 页 中 突出 显示 某 些 元 素 ， 
或 者 实时 改变 任意 多 个 元 素 。 只 需要 几 行 JavaScript 代 码 ， 束 可 以 进行 更 改 ， 从 而 影响 网 页 上 的 
大 量 元 素 。 

















2.6.3 ”探索 自 定 义 属 性 


日 定义 属性 是 CSS 中 一 个 全 新 的 领域 ， 开 发 人 员 刚 刚 开 始 探索 。 因 为 浏览 锅 文 持 有 限 ， 所 
以 还 没有 出 现 “典型 ”的 用 法 。 我 相信 假 以 时 日 ,会 出 现 各 种 最 佳 实践 和 新 的 用 法 。 这 需要 你 持 
续 关 注 。 继 续 使 用 目 定义 属性 ， 看 看 能 用 它 做 出 什么 效果 。 

值得 注意 的 是 , 在 不 文 持 目 定 义 属 性 的 浏览 硕 上 ，, 任何 使 用 var () 的 声明 都 会 被 忽略 。 请 尽 
量 为 这 些 训 览 从 提供 回 退 方 案 。 








Color: black; 





COolor: var(--main-color);: 


然而 这 种 做 法 不 是 万 能 的 ， 比 如 当 用 到 目 定 义 属 性 的 动态 特性 时 ， 就 很 难 有 备用 方案 。 关 注 
Can I Use 网 站 ， 查 看 最 新 的 浏览 兹 支持 情况 。 





2.7 总结 


口 拥抱 相对 单位 ， 让 网 页 的 结构 决定 样式 的 含义 。 

口 建议 用 rem 设置 字号 ， 但 是 有 选择 地 用 em 实现 网 页 组 件 的 人 简单 缩放 。 
口 不 用 媒体 查询 也 能 让 整个 网 页 响应 式 缩放 。 

口 使 用 无 单位 的 值 设 置 行 高 。 

口 请 开始 熟悉 CSS 的 一 个 新 特性 : 目 定 义 属性 。 

















盒 模 型 





本 章 概要 

口 给 元 素 设 置 大 小 的 实用 经 验 
口 实现 牌 直 居中 

口 实现 等 高 列 

口 负 的 外 边 距 和 外 边 距 折 蔷 
口 网 页 组 件 之 间 一 致 的 间 趾 








在 网 页 上 实现 元 素 布 局 涉及 很 多 技术 。 在 复杂 网 站 上 ,可 能 会 用 到 浮动 元 素 、 绝 对 定位 元 素 
以 及 其 他 各 种 大 小 的 元 素 , 其 至 也 会 使 用 较 新 的 CSS 特性 ， 比 如 Flexbox 或 者 网 格 布局 。 需要 掌 
握 的 内 容 太 多 ， 要 想 学 会 所 有 布局 相关 的 技术 不 太 现 实 。 

之 后 几 音 会 详细 介绍 几 种 布局 技术 。 在 此 之 前 我 们 要 打 好 基础 ,深刻 理解 浏览 带 是 如 何 设置 
元 素 的 大 小 和 位 置 的 。 高 级 的 布局 话题 基于 文档 流 和 盒 模型 等 概念 , 这 些 是 决定 网 页 元 素 的 大 小 
和 位 置 的 基本 规则 。 

本 章 将 构建 一 个 两 列 布局 的 网 页 。 你 可 能 很 熟悉 这 个 布局 ， 因 为 它 是 一 个 经 典 的 CSS 入 门 
练习 , 但 是 在 指导 你 完成 这 种 布局 的 过 程 中 ,我 会 强调 布局 中 经 党 被 忽略 的 一 些 细 市 。 我 们 会 处 
理 盒 模型 的 一 些 边 缘 情 况 , 我 也 会 分 享 一 些 有 关 设 置 元 素 大 小 和 对 齐 方式 的 经 验 。 男 外 本 昔 还 会 
处 理 CSS 中 最 让 人 头疼 的 两 个 问题 : 垂直 居中 和 等 高 列 。 


3.1 元 素 宽 度 的 问题 
在 本 音 ， 你 需要 构建 一 个 简单 的 网 页 :上面 是 网 页 头 部 ， 下 面 是 两 列 内 容 ， 最 终 效 果 如 


图 3-1 所 示 。 我 特意 将 这 个 网 页 设计 成 “ 块 状 ” 风 格 , 这 样 就 能 清楚 地 看 到 所 有 元 系 的 大 小 和 
位 置 。 












































Franklin Running Club 





。 FOLLOW US ON TWITTER 
Come join us! | FouowusohrwmreR | 
The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your Own pace. LIKE US ON FACEBOOK 


become a sponsor 


图 3-1 一 个 头 部 加 两 列 的 布局 


新 建 一 个 网 页 和 一 个 空 的 样式 表 , 将 其 链接 到 一 起 。 将 代码 清单 3-1 中 的 标记 加 入 到 新 网 页 
中 。 该 网 页 有 一 个 头 部 、 一 个 主 元 素 和 一 个 侧 边 栏 ， 它 们 构成 了 网 页 的 两 列 ， 并 由 一 个 容 融 元 素 
包 了 起 来 。 


代码 清单 3-1 两 列 布局 的 HTML 


<body> 
<header> 
<hli>Franklin Running Club</hi> 
</header> 
<div class="container"> 





<main class="main"> 
<h2>Come join us!</h2> 
<p> 
The Franklin Running club meets at 6:00pm every Thursday 
at the town square. Runs are three to five miles, at your 
own pace. 
</D> 
</main> 
<aside class="sidebar"> 
<div class="widget"></div> 
<div class="widget"></div> 
</aside> 
</div> 
</body> 


下 面 处 理 一 些 基础 样式 。 给 网 页 设置 字体 ， 然 后 给 网 页 和 每 个 主要 容器 设置 背景 色 ， 这 样 方 
便 看 清 每 个 容 颖 的 位 置 和 大 小 。 完 成 这 些 工 作 后 ， 网 页 如 图 3-2 所 示 。 


Franklin Running Club 


Come join us! 


The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 


图 3-2 三 个 市 背景 色 的 主要 容 帮 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com，) 专 享 尊重 版 权 
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在 一 些 网 站 设计 中 ， 某 些 容 带 的 背景 色 可 能 是 透明 的 。 在 这 种 情况 下 ， 可 以 先 暂 时 给 容 带 设 
置 一 个 背景 色 ， 等 实现 了 容 人 各 的 大 小 和 位 置 后 再 去 挥 背 景色 。 

基础 样式 如 代码 清单 3-2 所 示 。 由 于 现在 侧 边栏 是 空 的 ， 移 认 情 况 下 没有 高 度 ， 因 此 我 们 会 
给 它 加 上 内 边 距 返 出 一 点 高 度 。 其 他 容 表 最 后 也 需要 内 边 距 ,但 稍 后 再 处 理 。 现 在 将 以 下 代码 深 
加 到 你 的 样式 表 。 


代码 清单 3-2 ”应 用 字体 和 颜色 
body { 
background-color: #eee; 
font-family: Helvetica, Arial, sans-serif; 


} 











header { 
Color: #f£fff; 
background-color: #0072b0; 
border-radius: .5em; 


i 修复 IE 的 bug 
display: block; 


} 


.main f{ 
background-color: #fff; 
border-radius: .5em， 


-Sidebar { 给 侧 边 栏 加 上 内 边 距 
padding: 1.5em; 
background-color: #fff; 
border-radius: .D5em; 


} 


说 明 为 正 有 一 个 bug， 它 会 默认 将 <main> 元 素 泻 染 成 行内 元 素 ， 而 不 是 块 级 元 素 ， 

所 以 代码 中 我 们 用 声明 dijsplay: block 来 纠正 。 

接 下 来 将 两 列 放 到 合适 的 位 置 。 我 们 首先 使 用 浮动 布局 ,将 main 和 sidepar 问 左 浮动 ， 
分 别 设置 70% 和 30% 的 宽度 。 按 照 代 码 清单 3-3 更 新 你 的 样式 表 。 
代码 清单 3-3 对齐 两 列 


.main { 
float: left; 


width: 70%; 
J 夕 。 中 让 :可 二 
Baokgreoumd=GoLors HEfEE? 将 main 列 向 左 浮动 ， 





几时 > 0 
border-radius: .5S5em; 设置 宽度 为 70% 


} 


.Sidebar { 
float: left; 
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width: 30%; 
padding: 1.5em; 将 sigebar 向 左 浮动 ， 
#fff; 


background-color: 设置 宽度 为 30% 
border-radius: .5em; 


} 


结果 如 图 3-3 所 示 ， 并 没有 达到 理想 的 效 宋 。 


Come join us! 


The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your Own pace. 


图 3-3 main 和 siqebazr 的 宽度 分 别 为 70% 和 30% 
两 列 并 没有 并 排出 现 , 而 是 折 行 显示 。 虽然 将 两 列 宽度 设置 为 70% 和 30%, 但 它们 总 共 占 据 


的 宽度 超过 了 可 用 空间 的 100%， 这 是 因为 盒 模 型 的 默认 行为 (如 图 3-4 所 示 )。 当 给 一 个 元 系 设 
置 宽 或 高 的 时 候 ， 指 定 的 是 内 容 的 宽 或 高 ， 所 有 内 边 距 、 边 框 、 外 边 距 都 是 退 加 到 该 宽度 上 的 。 








图 3-4 默认 盒 模型 





这 种 行为 会 让 一 个 守 300px、 内 边 距 10px、 边 框 1px 的 元 素 渔 染 出 来 宽 322px ( 宽度 加 左右 
内 边 距 再 加 左右 边框 )。 如 果 这 些 值 使 用 不 同 的 单位 ， 情 况 就 会 更 复杂 。 

在 以 上 例子 中 (代码 清单 3-3 )， 侧 边栏 的 宽度 等 于 30% 宽 度 加 上 各 1.5em 的 左右 内 边 距 , 主 
容器 的 宽度 只 占 70%。 两 列 宽度 加 起 来 等 于 100% 宽 度 加 上 3em。 因 为 放 不 下 ， 所 以 两 列 便 折 行 
显示 了 。 


3.1.1 避免 魔术 数值 

最 条 的 方法 是 减少 其 中 一 列 (比如 侧 边 栏 ) 的 宽度 。 在 我 的 屏幕 上 ， 侧 边栏 改 为 宽 26%， 两 
列 能 够 并 排放 下 ,但 是 这 种 方式 不 可 徘 。26% 是 一 个 魔术 数值 ( magic number )。 它 不 是 一 个 理想 
的 值 ， 而 是 通过 改 样式 试 出 来 的 值 。 
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在 编程 中 不 推荐 魔术 数值 , 因为 往往 难以 解释 一 个 魔术 数值 生效 的 原因 。 如 果 不 理解 这 个 数 
值 是 怎么 来 的 ， 就 不 会 知道 在 不 同 的 情况 下 会 产生 什么 样 的 结果 。 我 的 屏 硕 党 1440px， 在 更 小 
的 视 口 下 ， 侧 边 栏 仍然 会 换行 。 虽然 CSS 中 有 时 确实 需要 反复 试验 ,但 目的 是 为 了 得 到 更 好 的 
样式 ， 而 不 是 为 了 强行 将 一 个 元 系 填 入 一 个 位 置 。 

替代 魔术 数值 的 一 个 方法 是 让 浏览 右 帮 忙 计算 。 在 本 例 中 ,因为 加 了 内 边 距 , 两 列 的 宽度 总 
和 超出 了 3em， 所 以 可 以 使 用 calc () 图 数 减 去 这 个 值 ， 得 到 刚好 100% 的 总 和 。 比 如 设置 侧 边 
栏 壳 度 为 calc (30% - 3em) 就 能 刚好 并 排放 下 两 列 ， 但 是 还 有 更 好 的 解决 办 法 。 


3.1.2 ”调整 盒 模 型 


刚才 遇 到 的 问题 说 明 黑 认 的 盒 模型 并 不 符合 需求 。 相 反 , 我 们 需要 让 指定 的 宽度 包含 内 边 距 
和 边框 。 在 CSS 中 可 以 使 用 pox-sizing 属性 调整 盒 便 型 的 丁 为。 

box-sizing 的 默认 值 为 content-box， 这 意味 任何 指定 的 宽 或 高 都 只 会 设置 内 容 盒 子 的 
大 小 。 将 box-sizing 设置 为 porder-box 后 ， height 和 width 属性 会 设置 内 容 、 内 边 距 以 
及 边框 的 大 小 总 和 ， 这 刚好 符合 示例 的 要 求 。 

如 图 3-5 所 示 ,， 盒 模型 的 box-sizing 为 porder-box。 在 这 个 模型 中 ， 内 边 距 不 会 计 一 个 
元 素 更 宽 ， 而 是 让 内 部 的 内 容 更 条 。 高 度 同 理 。 
































图 3-5 box-sizing 设置 为 border-box 的 盒 模型 


将 这 两 个 元 又 的 box-sizing 改 为 border-box 就 能 在 一 行 显示 , 不 管 左 右 内 边 距 是 多 少 ( 如 
图 3-6 所 示 )。 





Franklin Running Club 


Come join us! 


The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your Own pace， 


图 3-6 ”调整 盒 模型 后 ， 两 列 并 排 


Q 当 30% 的 计算 值 小 于 两 侧 内 边 距 之 和 时 会 折 行 。 一 一 译 者 注 
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按照 代码 清单 3-4 修改 样式 表 ， 调 整 main 和 sidebar 的 盒 模型 。 
代码 清单 3-4 ”修改 浮动 列 的 盒 模型 


.main 1{ 

box-sizing: border-box; 

EOat Ef 

width: 70%; 

background-color: #fff; 

border-radius: .Sem; 将 使 模 型 改 为 
} border-box 


.Sidebar { 
box-sizing: border-box; 
float: left; 
width: 30%; 
padding: 1.5em; 
background-color: #fff; 
border-radius: .5em; 


} 


使 用 box-sizing: border-box 后 ， 两 个 元 素 加 起 来 正好 等 于 100% 宽 度 。 现 在 因为 它们 
70% 和 30% 的 宽度 包含 内 边 距 ， 所 以 一 行 放 得 下 两 列 。 








3.1.3 ”全 局 设置 border-box 

现在 这 两 个 元 素 的 box-sizing 更 符合 预期 了 了 ， 但 是 以 后 使 用 其 他 元 素 时 还 会 遇 到 同样 的 
问题 。 最 好 能 一 次 解决 ， 这 样 以 后 就 不 用 再 想 着 调整 盒 模型 了。 代码 清单 3-5 用 通用 选择 和 硕 ( * ) 
选中 了 页 面 上 所 有 元 素 , 并 用 两 个 选择 需 选 中 了 网 页 的 所 有 伪 元 系 。 将 这 段 代码 放 到 你 的 样式 表 
开头 。 


代码 清单 3-5 ”全 局 修改 盒 模 型 为 porder-box 














: :before, 给 页 面 上 所 有 元 素 和 伪 元 素 
::after { 设置 border-box 
box-sizing: border-box; 


} 
加 上 这 上 段 代码 ，heignt 和 width 会 指定 元 系 的 实际 宽 和 高 。 改 变 内 边 距 不 会 影响 它们 。 








说 明 将 这 段 代码 放 到 样式 表 开 头 已 是 首 遍 做 法 了 。 


但 是 ， 如 有 果 在 网 页 中 使 用 了 市 样式 的 第 三 方 组 件 ， 束 可 能 会 因此 破坏 其 中 一 些 组 件 的 布局 ， 
尤其 是 当 第 三 方 组 件 在 开发 CSS 的 过 程 中 没有 考虑 到 使 用 者 会 修改 盒 模型 时 。 因 为 全 局 设置 
border-box 时 使 用 的 通用 选择 需 会 选中 第 三 方 组 件 内 的 每 个 元 素 ， 修 改 盒 模型 可 能 会 有 问题 ， 
所 以 最 终 需 要 写 另 外 的 样式 将 组 件 内 的 元 素 恢 复 为 content-box。 

有 一 种 简单 点 的 方式 ， 是 利用 继承 改 一 下 修改 盒 模 型 的 方式 。 如 代码 清单 3-6 所 示 ， 更 新 样 
式 表 。 
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代码 清单 3-6 ”让 全 局 修改 盒 模型 为 border-box 更 稳健 


:root { 
box-sizing: border-box; 根 元 素 设置 为 
] border-box 
大 
: :before, 
::after { 
box-sizing: inherit; i 
) 告诉 其 他 所 有 元 素 和 
伪 元 素 继承 其 盒 模型 





盒 模 型 通常 不 会 被 继承 ,但 是 使 用 inherit 关键 字 可 以 强制 继承 。 如 下 述 代码 所 示 ， 可 以 
在 必要 时 选中 第 三 方 组 件 的 顶级 容器 ， 将 其 恢复 为 content -pbox。 这 样 组 件 的 内 部 元 素 会 继承 
该 盒 模型 。 

.third-party-component { 


box-sizing: content-box; 


} 

现在 网 站 上 的 每 个 元 素 都 有 一 个 可 预测 性 更 好 的 盒 模型 了 。 如 果 要 开发 一 个 新 的 网 站 , 我 建 
以 将 代码 清单 3-6 加 到 CSS 中 ,因为 从 长 远 来 看 ,这 会 给 你 省 去 很 多 麻烦 。 但 是 如 采 给 已 有 的 样 
式 表 加 上 代码 清单 3-6 就 可 能 有 问题 ， 尤 其 是 当 你 已 基于 默认 的 内 容 盒 模型 写 了 很 多 样式 后 。 如 
末 非 要 给 已 有 项 目 加 上 这 段 代 人 码 ， 那 么 一 定 要 彻 瓜 检查 一 过 看 会 不 会 有 问题 。 


说 明 从 现在 开始 ， 本 书 的 每 个 示例 都 假设 你 的 样式 表 开 头 修改 为 了 border-pox。 











3.1.4 ”给 列 之 间 加 上 间 陋 


通 第 在 列 之 间 加 上 一 个 小 小 的 间 隅 会 更 好 看 。 这 有 时 可 以 通过 给 一 列 加 上 内 边 距 来 实现 , 但 
有 时 这 种 方式 行 不 通 。 比 如 在 本 章 示 例 中 ,两 列 和 都 有 背景 色 或 者 边框 ， 这 就 需要 将 间隔 放 在 两 个 
元 系 的 边框 之 间 〈 如 图 3-7 所 示 ) 注意 两 个 日 色 背 景 之 间 的 灰色 空间 。 实 现 这 种 效 末 有 好 几 种 
方式 ， 我 们 来 介绍 两 种 ， 如 代码 清单 3-7 和 代码 清单 3-8 所 示 。 


Franklin Running Club 


Come join us! 











The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 


图 3-7 在 两 列 之 间 加 间隔 


首先 ， 给 其 中 一 列 加 上 外 边 距 ， 再 调整 元 系 的 宽度 ， 将 多 出 来 的 空间 减 邱 。 代 码 清单 3-7 从 
侧 边栏 的 宽度 中 减 掉 了 1%， 将 其 增加 到 外 边 距 上 ， 按 照 代 码 清单 3-7 更 新 你 的 CSS。 








人 
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代码 清单 3-7 基于 特 分 比 的 外 边 距 留 日 





.main f{ 
float: left; 
width: 70%; 
background-color: #fff; 
border-radius: .Sem; 

} 

.Sidebar { 
float: left; 几 从 宽度 中 减 去 1% 
width: 29%; 











margin-left: 1%; | ee 将 其 添加 到 
padding: 1.5em; \ 旋 中 留 
外 边 距 贸 


background-color: 
border-radius: .5em; 


} 

这 上 段 代码 的 确 加 上 了 间隔 , 但 是 间隔 的 宽度 由 外 层 容 需 的 宽度 决定 , 百分比 是 相对 于 父 元 素 
的 完整 宽度 的 。 如 果 想 用 其 他 单位 指定 间距 呢 ? (我 更 想 用 em 指定 间距 ， 因 为 em 单位 的 一 致 
性 更 好 。) 可 以 用 calc () 来 实现 。 

可 以 从 冤 度 中 减 掉 1.5em 分 给 外 边 距 ， 而 不 是 完整 宽度 的 1%。 代码 清单 3-8 用 calc () 实现 
了 这 种 效果 ， 按 照 代码 清单 3-8 修改 你 的 CSS。 


代码 清单 3-8 使 用 calc () 从 宽度 中 减 去 间距 
.main f{ 
float: left; 
width: 70%; 
background-color: #fff; 














border-radius: .5em; 

} 

.Sidebar { Ey a 
Fl oate. Tett 从 宽度 中 减 去 
width: calc(30% - 1.5em); | 1.5em 
margin-left: 1.5em; 
addinmoi Les 将 其 添加 到 
background-color: #fff; 外 边 距 
border-radius: .5em; 


} 

这 种 方式 不 仅 能 够 使 用 em 指定 间距 ， 而 且 能 让 代码 意图 更 明显 。 之 后 再 看 代码 ， 从 代码 清 
单 3-7 中 可 能 看 不 出 为 什么 使 用 29%， 但 是 代码 清单 3-8 中 的 30% - 1.5em 则 能 提供 线索 ， 知 
道 它 是 基于 30% 算 出 来 的 。 


3.2 元素 高 度 的 问题 
处 理 元 素 高 度 的 方式 跟 处 理 宽 度 不 一 样 。 之 前 对 border_box 的 修改 依然 适用 于 高 度 ， 而 


AN 


且 很 有 用 , 但 是 通 稼 最 好 避免 给 元 系 指 定 明 确 的 高 度 。 普 通 文档 流 是 为 限定 的 宽度 和 无 限 的 高 度 
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设计 的 。 内 容 会 填 满 视 口 的 宽度 , 然后 在 必要 的 时 候 折 行 。 因 此 , 容器 的 高 度 由 内 容 天 然 地 决定 ， 
而 不 是 容 硕 目 己 决定 。 





普通 文档 流 指 的 是 网 页 元 素 的 默认 布局 行为 。 行 内 元 素 跟 随 文字 的 方向 从 左 到 


马 
不 
右 排列 ， 当 到 达 容 器 边缘 时 会 换行 。 块 级 元 素 会 占据 完整 的 一 行 ， 前 后 都 有 换行 。 





3.2.1 控制 洪 出 行为 


当 明 确 设置 一 个 元 素 的 高 度 时 ， 内 容 可 能 会 洪 出 容 从 。 当 内 容 在 限定 区 域 放 不 下 ,， 深 染 到 父 
元 系 外 面 时 ， 就 会 发 生 这 种 现象 。 图 3-8 展示 了 这 一 现象 。 文 档 流 不 考虑 溢出 的 情况 ， 其 容 途 下 
方 的 任何 内 容 乔 会 泻 染 到 淤 出 内 容 的 上 面 。 











We'll be running the Polar Bear Sk 
together on December 14th. Meet us 
at the town square at 7:00am to 
carpool. Wear blue! 


图 3-8 ”内 容 游 出 了 容 融 


用 overflow 属性 可 以 控制 溢出 内 容 的 行为 ， 该 属性 文 持 以 下 4 个 值 。 

D visible (默认 值 ) 一 一 所 有 内 容 可 见 ， 即 使 溢出 容 希 边缘 。 

UD hidden 溢出 容 融 内 边 距 边 绿 的 内 容 被 裁剪 ， 无 法 看 见 。 

D scrol1 一 一 容 需 出 现 滚动 条 ， 用 户 可 以 通过 滚动 查看 剩余 内 容 。 在 一 些 操作 系统 上 ， 会 
出 现 水 平和 垂直 两 种 滚动 条 ， 即 使 所 有 内 容 都 可 见 〈 不 溢 出 )。 不 过 , 在 这 种 情况 下 ， 滚 
动 条 不 可 滚动 ( 置 灰 )。 

DQ auto 只 有 内 容 洲 出 时 容器 才 会 出 现 深 动 条 。 

通常 情况 下 ， 我 倾向 于 使 用 auto 而 不 是 scrol11， 因 为 在 大 多 数 情 况 下 ， 我 不 希望 深 动 条 

一 直 出 现 。 图 3-9 展示 了 4 个 overflow 值 对 应 的 4 个 容 需 。 





























We'll be running the Polar Bear Sk We'll be running the Polar Bear Sk Well be running the Polar Bear Sk We'll be running the Polar Bear Sk 
together on December 14th. Meet us together on December 14th. Meet us Cn TN together on December 14th. Meet 
at the town square at 7:00am to eT Er 
carpool. Wear blue! 


图 3-9 ”从 左 到 右 ，overflow 值 分 别 是 visible、hidden、scroll、auto 





请 刘 慎 地 使 用 深 动 条 。 六 览 各 给 网 页 最 外 层 加 上 了 深 动 条 ， 如 果 网 页 内 部 再 舱 套 深 动 区 域 ， 
用 户 驳 会 很 反感 。 如 采用 户 使 用 鼠标 滚轮 滚动 网 页 ， 当 鼠标 到 达 一 个 较 小 的 滚动 区 域 ， 滚轮 就 会 
停止 深 动 网 页 ， 转 而 深 动 较 小 的 区 域 。 


水 平方 向 的 浇 出 
除了 重 直 浇 出 , 内容 也 可 能 在 水 平方 向 溢出 。 一 个 典型 的 场景 就 是 在 一 个 很 罕 的 容器 中 放 
一 条 很 长 的 URL。 洪 出 的 规则 跟 重 直方 向 上 的 一 致 。 


入 
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可 以 用 overflow-x 属性 单独 控制 水 平方 向 的 溢出 ,或 者 用 overflow-y 控制 垂直 方向 
溢出 。 这 些 属 性 支持 overflow 的 所 有 值 ， 然 而 同时 给 x 和 vy 指定 不 同 的 值 ， 往 往 会 产生 难 
以 预料 的 结果 。 


3.2.2 ”百分比 高 度 的 备 选 方案 


用 百分比 指定 高 度 存在 问题 。 百 分 比 参 考 的 是 元 素 容 表 块 的 大 小 , 但 是 容 需 的 高 度 通 篆 是 由 
于 元 素 的 高 度 决定 的 。 这 样 会 造成 死 循 环 ， 训 览 囊 处 理 不 了 ,因此 它 会 忽略 这 个 声明 。 要 想 让 上 百 
分 比 高 度 生 效 ， 必 须 给 父 元 系 明 确定 义 一 个 高 度 。 

人 们 使 用 百分比 高 度 是 想 让 一 个 容 需 填 满 屏幕 。 不 过 更 好 的 方式 是 用 视 口 的 相对 单位 vh， 
第 2 草 已 经 介绍 过 。100vh 等 于 视 口 的 高 度 。 还 有 一 个 更 希 见 的 用 法 是 创造 等 局 列 。 这 不 用 百 分 
比 也 能 实现 。 


1. 等 高 列 

等 高 列 的 问题 从 CSS 出 现 就 一 直 困 扰 着 人 们 。 在 21 世纪 初 ,CSS 取代 了 HIML 表格 成 为 布局 
的 主要 方式 。 当 时 表格 是 实现 等 高 列 的 唯一 方式 , 更 具体 地 说 , 是 不 明确 指定 高 度 就 能 实现 等 高 列 
的 唯一 方式 , 虽然 可 以 简单 地 将 所 有 列 设置 高 度 500px 或 者 其 他 任意 值 , 但 是 如 果 要 让 列 自己 决定 
高 度 , 每 个 元 素 可 能 算出 来 都 不 一 样 高 , 具体 高 度 取决 于 内 容 。 这 个 简单 的 用 例 就 是 以 让 人 们 抓 狂 。 

为 了 解决 这 个 问题 ， 诞 生 了 很 多 有 创意 的 解决 方案 。 随 着 CSS 的 演进 ， 出 现 了 伪 元 系 、 负 
外 边 距 等 方案 。 如 果 你 还 在 用 这 些 复 杂 的 方案 ,那么 是 时 候 改 变 了 。 现 代 浏 览 磊 支持 了 CSS 表 
格 ， 可 以 轻松 实现 等 高 列 ， 比 如 IE8+ 文 持 display : table，IE10+ 文 持 弹 性 盒子 或 者 Flexbox， 
都 默认 支持 等 高 列 。 


说 明 我 说 的 现代 浏览 器 是 指 能 够 自动 更 新 (长 青 ) 的 浏览 器 的 最 近 版 本 ， 和 包括 

Chrome、Firefox、Edge、Opera 还 有 Safari。 大 家 最 关心 [的 支持 情况 , 如 果 我 说 IE10+ 

支持 茶 特 性 ， 那 么 基本 上 所 有 长 青 浏览 器 者 支持 该 特性 。 

很 多 常见 的 设计 需要 等 高 列 ， 比 如 本 章 的 两 列 布局 就 是 个 典型 的 例子 。 如 采 将 主 列 和 侧 边 栏 
的 高 度 对 齐 ( 如 图 3-10 所 示 ), 看 起 来 就 会 更 精致 。 任 意 一 列 的 内 容 增 加 ， 两 列 的 高 度 都 会 增加 ， 
同时 保持 底部 对 齐 。 


Franklin Running Club 


Come join us! 
















































































The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 


图 3-10 ”等 高 列 
当然 , 你 可 以 给 两 列 随便 设置 一 个 高 度 值 , 但 是 应 该 选择 什么 值 呢 ? 太 大 了 就 会 在 容 需 底部 
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留 下 大 乒 空 月 ， 太 小 了 内 容 就 会 溢出 。 
最 好 的 办 法 是 让 它们 目 己 决定 高 度 ， 然 后 扩展 较 矮 的 列 ， 让 它 的 高 度 等 于 较 遍 的 列 。 下 面 会 
演示 通过 CSS 表格 和 Flexbox 两 种 方式 实现 这 种 效果 。 


2. CSS 表格 布局 











首先 ,用 CSS 表格 布局 和 奉 代 浮动 布局 。 给 容 骨 设置 display: table, 给 每 一 列 设置 diapolays 


table-cell, 按照 代码 清单 3-9 更 新 样式 。 ( 你 可 能 注意 到 了 这 里 没有 table-row 元 素 ， 因为 
CSS 表格 不 像 HTML 表格 那样 必须 有 行 元 系 。) 


代码 清单 3-9 使 用 CSS 表格 布局 的 等 高 列 


本 | 让 容器 布局 像 表 格 一 样 


display: table; 
width: 100%; 
i | 让 表格 填充 容器 的 宽度 


.main f{ 
display: table-cell; 
width: 70%; 


background-color: #f£fff; 
border-radius: .5em; 让 列 布局 像 表格 的 


} 单元 格 一 样 


.Sidebar f{ 
display: table-cell; 
width: 30%; 


margin-left: 1.5em; 
padding: 1.5em; 8 外 边 距 不 再 生效 
background-color: #fff; 


border-radius: .Sem; 


} 

不 像 block 的 元 素 ， 默 认 情 况 下 ， 显 示 为 table 的 元 素 宽度 不 会 扩展 到 100%， 因 此 需要 
明确 指定 宽度 @。 以 上 代码 已 经 差不多 实现 了 需求 , 但 是 缺少 间隔 。 这 是 因为 外 边 距 @ 并 不 会 作 
用 于 table-cell 元 素 ， 所 以 要 修改 代码 ， 让 间隔 生效 。 

可 以 用 表格 元 素 的 porder-spacing 属性 来 定义 单元 格 的 间距 。 该 属性 接受 两 个 长 度 值 : 
水 平 间距 和 垂直 间距 。( 也 可 以 将 这 两 个 长 度 值 指 定 为 同一 值 。) 可 以 给 容 融 加 上 pborder-spacing: 
1.5em 0， 但 这 会 产生 一 个 特殊 的 副作用 : 这 个 信也 会 作用 于 表格 的 外 边缘 。 这 样 两 列 就 无 法 跟 
头 部 左右 对 齐 了 《如 图 3-11 所 示 )。 


Franklin Running Club 


Come join us! 




















The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 


图 3-11 border-spacing 作用 于 单元 格 之 间 和 表格 的 外 边缘 
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机 千 的 你 可 能 会 想到 负 外 边 距 , 但 是 这 需要 给 整个 表格 包 右 一 层 新 的 容 需 。 具 体 步 又 : 在 表 
格 容 带 外 面包 一 个 元 又 <dqiv class="wrapper">， 将 其 左右 外 边 距 设置 为 -1.3em， 从 而 抵消 表 
格 容 带 外 侧 1.5em 的 border-spacing。 样 式 表 如 代码 清单 3-10 所 示 。 


代码 清单 3-10 ”基于 表格 的 列 ， 间 距 已 修正 


.Wrapper { 


margin-left: -1.5em; 添加 一 个 新 的 包 囊 元 素 ， 
margin-right: -1.5em; 设置 负 外 边 距 


} 


.Container { 
display: table; 
width: 100%; 


border-spacing: 1.5em 0; 
} 单元 格 之 间 加 上 水 平 的 


border-spacing 
.main f{ 
display: table-cell; 
width: 70%; 
background-color: #fff; 
border-radius: .Sem; 


} 


.Sidebar { 
display: table-cell; 
width: 30%; 
padding: 1.5em; 
background-color: #f£fff; 
border-radius: .Sem; 


} 


正 的 外 边 距 会 将 容 带 的 边 绿 往 里 推 ， 而 负 的 外 边 距 则 会 将 边 绿 往外 拉 。 绪 合 porder-spacing， 
两 列 笔 近 外 侧 的 边缘 跟 <boqy> ( 包 囊 元 系 所 在 的 容 胡 盒子 ) 的 边缘 对 齐 了 。 现 在 的 布局 满足 了 
需求 : 两 列 等 霹 ，1.Sem 的 间距 ， 外 边 绿 跟头 部 对 齐 〈 如 图 3-12 所 示 )。 


Franklin Running Club 


Come join us! 


The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 








图 3-12 完美 的 等 高 列 
负 外 边 距 有 一 些 好 玩 的 用 处 ， 稍 后 会 介绍 。 
用 表格 实现 布局 


如 果 你 已 经 做 了 一 段 时 间 Web 开发 ， 大 概 听 过 用 HTML 表格 实现 布局 并 非 明 每 之 举 。 在 
21 世纪 初 ， 很 多 网 站 设计 师 使 用 <table> 元 素 实 现 网 站 布局 ， 因 为 它 比 用 浮动 布局 (当时 唯 
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一 的 替代 方案 ) 简单 。 后 来 ， 有 许多 人 强烈 反对 表格 布局 ， 因 为 它 用 了 无 语义 的 HITML 标签 。 
那 时 表格 没有 承担 内 容 标 签 的 功能 ， 反 而 做 着 本 该 由 CSS 负责 的 布局 工作 。 

浏览 器 现在 支持 将 各 种 元 素 显 示 为 表格 , 而 不 只 是 <table>, 因此 我 们 可 以 一 边 享受 表格 
布局 带 来 的 好 处 ,一边 维 护 语义 标记 。 然 而 这 种 方式 并 不 是 完美 的 解决 方案 ，HTML 表格 的 
colspan 和 rowspan 属性 在 CSS 中 没有 可 替代 的 方案 ， 而且 浮 动 、Flexbox 以 及 inline-block 
可 以 实现 表格 无 法 实现 的 布局 。 


3. Flexbox 
我 们 还 可 以 用 Flexbox 实现 两 列 等 高 布局 ， 如 代码 清单 3-11 所 示 。Flexbox 不 需要 一 个 额外 
的 div 包 正 元 素 ， 它 默认 会 产生 等 高 的 元 素 。 此 外 也 不 需要 使 用 名 外 边 距 。 











提示 “如果 你 不 用 支持 IE9 及 其 以 下 的 浏览 器 ， 建 议 使 用 Flexbox 而 不 是 表格 布局 。 





将 div 包 囊 元 素 去 掉 ， 按 照 代 码 清单 3-11 更 新 样式 表 。 如 果 你 还 不 了 解 Flexbox ,下面 有 简 
要 介绍 。 


代码 清单 3-11 使 用 Flexbox 实现 的 等 高 列 


.Container { 


多 安 强 购 5， 
display: flex; 将 容 厂 的 QEDEAY 
} 属性 设置 为 flex 
.main f{ 


width: 70%; 


background-color: #fff; 弹性 容器 内 的 元 素 不 需要 指定 
border-radius: 0.5em; 


display 或 者 float 属性 


.Sidebar { 
width: 30%; 
padding: 1.5em; 
margin-left: 1.5em; 
background-color: #fff; 
border-radius: .5em; 


} 


跟 浮动 布局 一 样 ， 
外 边 距 可 以 生效 


给 容 融 设置 9isplay : flex， 它 就 变 成 了 一 个 弹性 容器 ( flex container )， 子 元 系 默 认 等 高 。 
你 可 以 给 子 元 系 设 置 宽度 和 外 边 距 , 尽管 加 起 来 可 能 超过 100%，Flexbox 也 能 妥善 处 理 。 以 上 代 
人 码 清 单 演 染 出 来 的 样式 跟 表格 布局 一 样 ， 而 且 不 需要 额外 包 庄 元素，CSS 也 更 人 简单。 

Flexbox 提供 了 很 多 选项 ， 第 5 章 会 详细 介绍 。 这 个 例子 里 的 选项 已 足以 创建 你 的 第 一 个 
Flexbox 的 布局 了 。( IE10 还 要 求 加 上 浏览 右前 级 ， 第 5 章 会 介绍 。) 








警告 ”除非 别 无 选择 ， 否 则 不 要 明确 设置 元 素 的 高 度 。 先 寻找 一 个 替代 方案 。 设 置 高 度 
一 定 会 导致 更 复杂 的 情况 。 
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3.2.3 ”使 用 min-height 和 max-height 


接 下 来 介绍 的 两 个 是 很 有 用 的 属性 : min-height 和 max-height。 你 可 以 用 这 两 个 属性 指 
定 最 小 或 最 大 值 ， 而 不 是 明确 定义 高 度 ， 这 样 元 系 就 可 以 在 这 些 界限 内 目 动 决定 蜗 度 。 

如 果 你 想 要 将 一 张大 图 放 在 一 大 段 文 字 后 面 , 但 是 担心 它 洲 出 容 迄 , 就 可 以 用 min-heignht 
指定 一 个 最 小 高 度 ， 而 不 指定 它 的 明确 高 度 。 这 意味 看 元 素 至 少 等 于 你 指定 的 高 度 ， 如 果 内 容 太 
多 ， 浏 览 硕 就 会 允许 元 素 目 己 扩 展 高 度 ， 以 免 内 容 洪 出 。 

图 3-13 有 三 个 元 素 。 左 边 的 元 素 没有 min-neight ， 因 此 它 的 高 度 由 自身 决定 ， 另 外 两 个 
元 素 痢 设置 了 min-height 为 3em。 中 间 的 元 系 如 采 目 己 决 定 高 度 的 话 应 该 比 现在 矮 ， 但 是 
min-height 值 让 它 的 高 度 为 3sem。 右 边 的 元 素 内 容 多 到 已 经 超过 3em， 容 带 日 然 地 扩展 局 度 ， 
以 容纳 内 容 。 


| We'll be running the Polar Bear Sk. | We'll be running the Polar Bear Sk. We'll be running the Polar Bear Sk 
together on December 14th. Meet us 
没有 min-height at the town square at 7:00am to 



































carpool. Wear blue! 





{ min-height: 3em; } 
{ min-height: 3em; } 


图 3-13 ”三 个 元 素 ， 一 个 没有 指定 高 度 ， 男 外 两 个 元 素 设 置 了 min-height 为 3em 
同 理 , max-heignt 允许 元 对 自然 地 增高 到 一 个 特定 界限 。 如 果 到 达 这 个 界限 , 元素 就 不 再 
增高 ， 内 容 会 溢出 。 还 有 类 似 的 属性 是 min-wiath 和 max-wigdth， 用 于 限制 元 素 的 宽度 。 
3.2.4 ”垂直 居中 内 容 


CSS 另 一 个 让 人 头疼 的 问题 就 是 垂直 居中 。 过 去 有 好 几 种 方式 实现 垂直 居中 ,但 是 每 一 种 
方式 都 有 一 定 的 局 限 性 。 在 CSS 中 ， 回 答 一 个 问题 的 答案 通常 是 “这 得 看 情况 ”， 垂 直 居 中 就 是 
如 此 。 


























为 什么 vertical-align 不 生效 

如 果 开 发 人 员 期 望 给 块 级 元 素 设 置 vertical-align: middle 后 ， 块 级 元 素 里 的 内 容 
就 能 垂直 居中 ， 那 么 他 们 通常 会 失望 ， 因 为 浏览 器 会 忽略 这 个 声明 。 

vertical-align 声明 只 会 影响 行内 元 素 或 者 table-cell 元 素 。 对 于 行内 元 素 ， 它 控制 着 
该 元 素 跟 同一 行内 其 他 元 素 之 间 的 对 齐 关系 。 比 如 ,可 以 用 它 控制 一 个 行内 的 图 片 跟 相 邻 的 文 
字 对 草 。 

对 于 显示 为 table-cell 的 元 素 ，vertical-align 控制 了 内 容 在 单元 格 内 的 对 齐 。 如 果 你 
的 页 面 用 了 CSS 表格 布局 ， 那 么 可 以 用 vertical-align 来 实现 重 直 居中 。 








一 个 不 好 的 做 法 就 是 ， 给 容 涟 设 定 一 个 高 度 值 ， 然 后 试 图 让 动态 大 小 的 内 部 元 素 居 中 。 在 实 
现 这 种 效果 时 ,请 尽量 交 给 浏览 带 来 决定 局 度 。 
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CSS 中 最 侧 单 的 垂 居 中 方法 是 给 容 郁 相等 的 上 下 内 边 距 , 让 容 般 和 内 容 目 行 决定 目 己 的 高 
度 (如 图 3-14 所 示 )， 对 应 的 样式 见 代 码 清 单 3-12。 你 可 以 暂时 将 这 段 代码 放 到 样式 表 ， 看 看 它 
在 网 页 中 的 样式 (之 后 记得 删 控 ， 因 为 在 设计 中 不 是 这 样 )。 





Franklin Running Club 








图 3-14 ”使 用 内 边 距 让 内 容 垂直 居中 
代码 清单 3-12 ”使 用 内 边 距 证 内容 垂 直 居 中 


header { 
padding-top: 4em; 
padding-bottom: 4em; 相同 的 上 下 内 边 距 , 不 用 指定 高 度 
COIOE: #fff; 也 能 让 元 素 内 容 垂直 居中 


background-color: #0072b0; 
border-radius: .5em; 


} 


不 管 容 问 里 的 内 容 显示 为 行内 、 块 级 或 者 其 他 形式 ,这 种 方法 名 有 效 , 但 有 时 我 们 想 给 容 从 
设置 固定 高 度 ， 或 者 无 法 使 用 内 边 距 ， 因 为 想 让 容 带 内 另 一 个 子 元 系 徘 近 容 珊 的 顶部 或 者 底部 。 

这 在 等 高 列 中 也 是 一 个 第 见 的 问题 , 尤其 是 用 浮动 布局 这 种 较 传统 的 拉 术 实现 时 。 还 好 CSS 
表格 和 Flexbox 能 够 轻松 实现 大 中 。( 如 果 用 传统 的 搁 术 ， 知 要 用 别 的 办 法 处 理 内 容 大 中 。) 不 同 
的 情况 有 不 同 的 处 理 方法 ， 具 体 参 考 如 下 面 的 附加 栏 所 示 。 














垂直 居中 指南 
在 容器 里 让 内 容 居 中 最 好 的 方式 是 根据 特定 场景 考虑 不 同 因素 。 做 出 判断 前 , 先 逐 个 询问 
自己 以 下 几 个 问题 ,直到 找到 合适 的 解决 办 法 。 其 中 一 些 技术 会 在 后 面 的 章节 中 介绍 ,可 根据 
情况 翻阅 对 应 的 内 容 寻 找 答案 。 
口 可 以 用 一 个 自然 高 度 的 容器 吗 ? 给 容器 加 上 相等 的 上 下 内 边 距 让 内 容 居 中 。 
加 | 容器 需要 指定 高 度 或 者 避免 使 用 内 边 距 上 吗 ? 对 容器 使 用 di 和 
vertical-align: middle,。 
口 可 以 用 Flexbox 吗 ? 如 果 不 需要 支持 IE9， 可 以 用 Flexbox 居中 内 容 。 参 见 第 5 章 。 
口 容器 里 面 的 内 容 只 有 一 行文 字 吗 ? 设置 一 个 大 的 行 高 ， 让 它 等 于 理想 的 容器 高 度 。 这 样 会 
让 容器 高 度 扩 展 到 能 够 容纳 行 高 。 如 果 内 容 不 是 行内 元 素 ， 可 以 设置 为 inline-block。 
口 容器 和 内 容 的 高 度 都 知道 吗 ? 将 内 容 绝 对 定位 。 参 见 第 7 章 。( 只 有 当前 面 提 到 的 方法 
都 无 效 时 才 推 荐 这 种 方式 。) 
D 不 知道 内 部 元 素 的 高 度 ? 用 绝对 定位 结合 变形 〈transform )。 参 见 第 15 章 的 例子 。( 还 
是 只 有 当前 面 提 到 的 方法 都 无 效 时 才 推 荐 该 方法 。) 


还 不 确定 的 话 ， 参 考 howtocenterincss 网 站 。 这 个 网 站 很 不 错 ， 可 以 根据 自己 的 场景 填写 
几 个 选项 ， 然 后 它 会 相应 地 生成 重 直 居中 的 代码 。 


3.3 负 外 边 力 距 


不 同 于 内 边 距 和 边框 宽度 ,外边 距 可 以 设置 为 负 值 。 负 外 边 距 有 一 些 特殊 用 途 ， 比 如 让 元 素 
重 登 或 者 拉 伸 到 比 容 如 还 宽 。 

负 外 边 距 的 具体 行为 取决 于 设置 在 元 泰 的 哪 边 ， 如 图 3-15 所 示 。 如 果 设 置 左边 或 顶部 的 负 
外 边 距 ,元 系 就 会 相应 地 癌 左 或 回 上 移动 ， 导 人 致 元 条 与 它 前 面 的 元 系 重 辣 ， 如 果 设 置 右 边 或 者 底 
部 的 负 外 边 距 ， 并 不 会 移动 元 素 ， 而 是 将 它 后 面 的 元 素 拉 过 来 。 给 元 素 底 部 加 上 负 外 边 距 并 不 等 
同 于 给 它 下 面 的 元 素 顶 部 加 上 负 外 边 距 。 

左边 顶 癌 右边 底部 











左边 或 项 部 的 负 外 边 距 


右边 或 底部 的 负 外 边 距 将 跟随 其 后 的 
元 素 向 左 或 者 向 上 拉 (导致 重合 ) 




















将 元 素 问 左 或 者 向 上 拉 








图 3-15 负 外 边 距 的 行为 


如 果 不 给 一 个 块 级 元 素 指定 宽度 ， 它 会 自然 地 填充 容 需 的 宽度 。 但 如 果 在 右边 加 上 和 负 外 边 距 ， 
则 会 把 它 拉 出 容器 。 如 果 在 左边 再 加 上 相等 的 负 外 边 距 ,元素 的 两 边 都 会 扩展 到 容器 外 面 。 这 就 是 
为 什么 可 以 拉 宽 图 3-12 里 的 表格 容 融 布局 ， 计 它 填 满 <boqy> 的 宽度 ， 忽 略 border-spacing 的 影 啊 。 


警告 ”如果 元 素 被 别 的 元 素 遮挡 ， 利用 负 外 边 距 让 元 素 重 肥 的 做 法 可 能 导致 元 素 不 可 
点 击 。 


负 外 边 距 并 不 常用 , 但 是 在 茶 些 场景 下 很 实用 , 尤其 是 当 创 建 列 布局 的 时 候 。 不 过 应 当 避 人 免 
频繁 使 用 ， 不 然 网 页 的 样式 就 会 失控 。 


3.4 ”外 边 距 折 荆 


再 看 一 眼 你 的 网 页 ， 有 没有 发 现 有 些 外 边 距 不 对 劲 ? 头 部 和 容器 明明 没有 添加 任何 外 边 距 ， 
为 什么 它们 之 间 会 有 间距 ( 如 图 3-16 所 示 ) 呢 ? 
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头 部 和 主 区 域 之 间 有 间距 





Franklin Running Club 


Come join us! 


The Franklin Running club meets at 6:00pm every Thursday at the town square. 





图 3-16 ”外边 距 折 炙 导致 了 间距 


当 顶 部 和 /或 底部 的 外 边 跑 相 邻 时 ， 就 会 重奏 ,产生 单个 外 边 中 。 这 种 现象 被 称 作 折 靶 。 
图 3-16 中 头 部 下 方 的 空 日 就 是 由 于 外 边 距 折 奏 造成 的 。 下 面 看 看 它 的 工作 原理 。 


3.4.1 文字 折 著 


外 边 距 折 著 的 主要 原因 与 包含 文字 的 块 之 间 的 间隔 相关 。 上 段落 ( <p> ) 默认 有 lem 的 上 外 边 
中 和 lem 的 下 外 边 距 。 这 是 用 户 代 理 的 样式 表 添 加 的 ,但 当前 后 车 放 两 个 段落 时 ， 它 们 的 外 边 
距 不 会 相 加 产生 一 个 2em 的 间距 ， 而 会 折 营 ， 只 产生 lem 的 间隔。 

比如 ， 示 例 中 左 列 里 的 文学 块 就 发 生 了 外 边 距 折 营 。<n2> 机 (“Comejoin us!”) 底部 的 外 
边 距 为 0.83em， 跟 它 后 面 的 段落 的 顶部 外 边 距 折 钱 。 如 图 3-17 所 示 ， 分 别 是 它们 的 外 边 距 。 注 
意 每 个 元 素 的 外 边 距 是 如 何在 网 页 中 占据 相同 位 置 的 。 

















Come joinus! Come join us! 
The Frankiin Running club meets at6:00pm every ~ ~ The Frankin Running club meets at6:00pm every ~ 
Thursday at the town square. Thursday atthetownsquare. .- 


图 3-17 分别 标 出 了 标题 〈 左 图 ) 和 段落 〈 右 图 ) 的 外 边 距 


折 苹 外 边 距 的 大 小 等 于 相 邻 外 边 距 中 的 最 大 值 。 标 题 的 下 方 有 19.92px 的 外 边 距 ( 24px 字号 x 
0.83em 外 边 距 ), 段落 顶部 有 16px 的 外 边 距 ( 16px 字 号 Xlem 外 边 距 ), 它们 中 的 较 大 者 是 19.92px， 
也 就 是 最 终 演 染 的 两 个 元 素 之 间 的 间距 。 


3.4.2 ”多 个 外 边 距 折 蔷 


即使 两 个 元 系 不 是 相 邻 的 兄 第 市 点 也 会 产生 外 边 距 折 车 。 即 使 将 这 个 段落 用 一 个 额外 的 div 
包 于 起 来 ， 如 代码 清单 3-13 所 示 ， 最 终 视觉 结 采 也 一 样 。 在 没有 其 他 CSS 的 影响 下 ， 所 有 相 邻 
的 顶部 和 瓜 部 外 边 距 部 会 扩 蕾 。 
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代码 清单 3-13” 包 于 在 div 里 的 段落 也 会 产生 外 边 距 折 车 
<main class="main"> 
<h2>Come join us!</h2> 
<div> 
<p> 





The Franklin Running club meets at 6:00pm os a 
段落 的 外 边 距 还 是 会 折 侄 





every Thursday at the town square. Runs 
are three to five miles, at your own pace. 
</pP> 
</div> 
</main> 


在 代码 清单 3-13 中 ， 有 三 个 不 同 的 外 边 距 折 闭 到 一 块 了 : <h2> 底 部 的 外 边 距 、<aiv> 顶 部 
的 外 边 距 、<p> 顶 部 的 外 边 距 。 计 算 值 分 别 是 19.92px、0px、16px。 因 此 最 终 间 隔 还 是 19.92px， 
也 就 是 三 者 中 最 大 的 值 。 实 际 上 ， 即 使 将 段落 放 在 多 个 aiv 中 骸 套 ， 泻 染 结 果 都 一 样 : 所 有 的 
外 边 距 都 会 折 车 到 一 起 。 

总 之 , 所 有 相 令 的 项 部 和 底部 外 边 距 会 折 闭 到 一 起 。 如 果 在 页 面 中 添加 一 个 空 的 、 无 样式 的 
div (没有 高 度 、 边 框 和 内 边 距 )， 它 自己 的 顶部 和 底部 外 边 距 就 会 折 鞋 。 


说 明 只 有 上 下 外 边 距 会 产生 折 营 ， 左 右 外 边 距 不 会 折 营 。 


折 蕉 外 边 距 就 像 “ 个 人 空间 ”。 如 果 在 公交 车 站 站 着 两 个 人 ， 他 们 每 个 人 都 认为 较为 舒适 的 
个 人 空间 应 为 3 英尺 "， 那 么 他 们 就 会 乐意 间隔 3 英尺 ， 而 不 必 间 隔 6 英尺 才 让 双方 满意 。 

这 也 就 是 说 可 以 给 任何 元 系 加 上 外 边 距 ， 而 不 必 担 心 它们 前 后 的 元 素 是 什么 。 如 采 给 标题 底 
部 加 上 1.5em 的 外 边 距 ,那么 在 标题 下 面 不 管 古 顶部 外 边 中 为 lem 的 <p> 元 系 还 是 没有 顶部 外 边 
距 的 div 元 素 ， 它们 之 间 的 间距 都 等 于 1.Sem。 只 有 当 后 面 的 元 素 需 要 更 大 的 空间 时 ， 折 和 故 外 边 
距 才 会 大 于 1.5em。 









































3.4.3 ”容器 外 部 折 垂 


三 个 连续 的 外 边 距 折 垣 可 能 会 让 你 措手不及 。 如 采 元 系 的 容 希 有 背景 色 , 元 素 的 外 边 距 在 容 
从 外 面 折 和 登 通常 会 产生 不 想 要 的 效 末 。 

再 看 看 图 3-16 中 头 部 下 面 的 间距 。 网 页 标题 是 <n1>， 用 户 代 理 样式 表 给 它 底 部 设置 的 外 边 
距 为 0.67em ( 21.44px )。 它 的 父 元 素 是 <headqer>， 没 有 设置 任何 外 边 距 。 因 为 它们 的 底部 外 边 
距 相 邻 ， 所 以 会 折 钱 ， 导 人 至 <hneader> 下 方 出 现 了 了 21.44px 的 外 边 距 。 这 两 个 元 素 顶 部 的 外 边 距 
也 发 生 了 折 著 。 

这 种 现象 比较 奇怪 。 在 这 种 情况 下 ， 我 们 希望 <n1> 的 外 边 中 留 在 <hneader> 中 , 但 是 外 边 距 
不 一 定 在 理想 的 地 方 折 共 。 洱 运 的 是 ， 有 一 些 方法 可 以 防止 这 种 现象 。 实际 上 你 已 经 在 网 页 的 主 
区 域 修 复 过 这 个 问题 了 。 注 意 看 “Come join us!” 上 方 的 外 边 距 没有 在 容 人 大 外 面 折 炙 ， 这 是 因为 
弹性 子 元 素 的 外 边 距 不 会 折 登 ， 而 这 一 块 刚好 用 了 Flexbox 布局 。 



































OQ@ 1 英尺 约 合 0.3048 米 。 一 一 编者 注 
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内 边 距 也 能 解决 这 个 问题 。 给 涉 部 添加 上 下 内 边 距 ， 外 边 距 就 不 会 在 容 硕 外 部 折 著 。 现 在 将 
头 部 的 样式 更 新 ， 让 它 如 图 3-18 所 示 ， 也 加 上 左右 内 边 距 。 如 代码 清单 3-14 所 示 更 新 你 的 样式 
表 ， 但 是 这 样 会 于 失 头 部 和 主 内 容 之 间 的 外 边 距 ， 我 们 稍 后 会 解决 这 个 问题 。 


Franklin Running Club 





Nnmoe inin uel 


图 3-18 ”给 头 部 加 上 内 边 距 ， 防 止 外 边 距 折 鞋 
代码 清单 3-14 ”给 头 部 加 上 内 边 距 


header { 
padding: lem 1.5em; 
color: #fff.; 
background-color: #0072b0; 
border-radius: .5em; 


} 


如 下 方法 可 以 防止 外 边 距 折 蕾 。 

口 对 容器 使 用 overflow: auto (或 者 非 visible 的 值 )， 防 止 内 部 元 素 的 外 边 距 跟 容器 
外 部 的 外 边 距 折 共 。 这 种 方式 副作用 最 小 。 

口 在 两 个 外 边 距 之 间 加 上 边框 或 者 内 边 距 ， 防 止 它们 折 狼 。 

口 如 果 容 右 为 浮动 元 素 、 内 联 块 、 绝 对 定位 或 固定 定位 时 ， 外 边 趾 不 会 在 它 外 面 折 靶 。 

口 当 使 用 Flexbox 布局 时 ， 弹 性 布局 内 的 元 素 之 间 不 会 发 生 外 边 距 折 和 登 。 网 格 布局 〈 人 参见 
第 6 半 ) 同 理 。 

口 当 元 素 显 示 为 table-cell 时 不 具备 外 边 距 属性 ， 因 此 它们 不 会 折 钱 。 此 外 还 有 table-row 
和 大 部 分 其 他 表格 显示 类 型 ， 但 不 包括 table、 table-inline、 table-captiono 

这 些 方 法 中 有 很 多 会 改变 元 素 的 布局 行为 ， 除 非 它们 能 产生 想 要 的 布局 ， 否 则 不 要 轻易 使 用 。 


3.5 ”容器 内 的 元 素 则 距 


容 亏 的 内 边 距 和 内 容 的 外 边 距 之 间 的 相互 作用 处 理 起 来 很 棘手 。 我 们 给 侧 边栏 加 上 一 些 元 
率 ， 看 看 会 出 现 什 么 问题 以 及 如 何 解决 。 最 后 ， 我 会 介绍 一 个 实用 技术 来 简化 这 些 问 题 。 

我 们 将 给 侧 边 栏 加 上 两 个 跳 转 到 社交 媒体 页 的 按钮 以 及 一 个 不 重要 的 链接 。 侧 边栏 最 终 完 成 
的 效果 如 图 3-19 所 示 。 














FOLLOW US ON TWITTER 
LIKE US ON FACEBOOK 


become a sponsor 


图 3-19” 侧 边栏 里 的 内 容 有 适当 的 间距 


hy 


00 第 3 草 盒 模型 


先 从 两 个 社交 链接 入 手 。 如 代码 清单 3-15 所 示 ， 给 侧 边 栏 加 上 两 个 链接 ,用 button-1ink 
类 作为 选择 从。 


代码 清单 3-15 ”给 侧 边栏 加 上 两 个 社交 按钮 
<aside class="sidebar"> 
<a href="/twitter" class="button-link"> 
follow us on Twitter 
</a> 
<a href="/facebook" class="button-link"> 
like us on Facebook 
</a> 
</aside> 


接 下 来 ， 要 给 按钮 加 上 通用 样式 。 将 其 设置 为 块 级 元 素 ， 以 便 填 满 容 需 的 宽度 ， 也 能 够 让 每 
个 按钮 单独 一 行 。 将 代码 清单 3-16 加 入 你 的 样式 表 。 


代码 清单 3-16 ”设置 侧 边栏 按钮 的 大 小 、 字 体 、 颜 色 
.button-link { 
display: block; 


Badding: 0.>em; 块 级 元 素 填 满 了 可 用 宽度 ， 
J 同时 让 每 个 链接 单独 一 行 


background-color: #0090C9,; 
text-align: center; 
text-decoration: none; 
text-transform: Uppercase:， 


} 


完成 了 这 两 个 链接 的 样式 后 ， 还 需要 加 上 上 间距。 此刻, 没有 外 边 距 的 它们 直接 上 下 堆 著 在 一 
起 。 现 在 有 两 个 选择 : 分 别 或 同时 指定 它们 的 上 下 外 边 距 ， 两 个 按钮 之 则 会 发 生 外 边 距 折 苇 。 

然而 不 管 选 择 哪 种 方式 ， 都 会 遇 到 一 个 问题 : 侧 边 栏 的 内 边 距 知 要 跟 按钮 的 外 边 距 接触 。 如 
果 加 上 margin-top: 1.5em， 最 终 效 果 如 图 3-20 所 示 。 





FOLLOW US ON TWITTER 
LIKE US ON FACEBOOK 


图 3-20 ”按钮 的 上 外 边 距 使 得 容 问 的 内 边 距 看 起 来 更 大 了 


现在 容器 顶部 有 了 多 余 的 空间 。 第 一 个 按钮 的 顶部 外 边 距 加 上 容 需 顶部 的 内 边 距 产生 的 空间 
大 于 其 余 三 个 方 回 的 留 日 ， 显 得 很 不 匀称 。 

有 好 几 种 方法 可 以 解决 该 问题 。 代 码 清单 3-17 是 其 中 较 简 单 的 办 法 。 它 使 用 相 邻 的 兄弟 组 
合 角 (+ ) 选中 同一 个 父 元 素 下 紧 跟 在 其 他 button-link 后 面 的 button-link 元 素 。 现 在 只 
在 两 个 按钮 之 间 存 在 外 边 距 。 








他 
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代码 清单 3-17 ”使 用 相 邻 兄弟 组 合 需 给 按钮 之 间 加 上 一 个 外 边 距 
.button-link { 
display: block; 
padding: .5em; 
coOolor: #f£fff; 
background-color: #0090C9; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 


} 





.button-link + .button-link f{ 
margin-top: 1.5em; 只 给 紧 跟 在 其 他 button-1link 后 面 的 
} button-link 加 上 顶部 外 边 距 


这 看 起 来 生效 了 (如 图 3-21 所 示 ) 第 一 个 按钮 不 再 有 项 部 外 边 距 ， 按 钮 四 周 的 间距 一 致 。 


FOLLOW US ON TWITTER 
LIKE US ON FACEBOOK 


图 3-21 按钮 四 周 加 上 了 一 致 的 间距 


3.5.1 如 果 内 容 改变 了 


上 述 方法 让 一 切 如 预期 , 但 是 如 果 在 侧 边 栏 添 加 更 多 内 容 ， 则 会 再 次 出 现 间 距 问 题 。 如 代码 
清单 3-18 所 示 ， 加 上 第 三 个 链接 ， 类 设 为 sponsor-1ink， 这 样 就 可 以 给 链接 加 上 其 他 样式 。 


代码 清单 3-18 给 侧 边 栏 加 上 为 一 种 链接 
<aside class="sidebar"> 
<a href="/twitter" class="button-link"> 
follow us on Twitter 
</a> 
<a href="/facebook" class="button-link"> 
like us on Facebook< 


/a> 
<a href="/sponsors" class="sponsor-link"> 
会 们 | 力 栏 
become a sponsor 给 侧 边栏 加 上 
</a> 另 一 种 链接 
</aside> 


接 下 来 需要 给 这 个 链接 添加 样式 ,但 是 同时 还 得 处 理 它 跟 其 他 按钮 的 间距 。 图 3-22 是 处 理 
之 前 的 样子 。 


FOLLOW US ON TWITTER 
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become a sponsor 


图 3-22 ”第 二 个 按钮 和 底部 链接 之 间 缺 少 间 距 
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代码 清单 3-19 是 压 部 链接 的 样式 。 将 它们 添加 到 你 的 样式 表 。 你 可 能 想 给 链接 也 加 一 个 项 
部 外 边 距 ， 且慢， 我 接 下 来 会 介绍 为 一 个 有 趣 的 方案 。 


代码 清单 3-19 ”赞助 商 链接 ( sponsor-link ) 的 样式 
.Sponsor-link f{ 
display: block; 
COlor: #0072kb0; 
font-weight: bold; 
text-decoration: none; 


l 


虽然 给 链接 加 上 顶部 外 边 距 也 可 以 实现 效果 , 但 是 考虑 到 HTML 会 频繁 改动 ， 也 许 下 个 月 ， 
也 许 下 一 年 , 总 有 一 天 这 个 侧 边 栏 里 有 些 内 容 需要 移动 或 者 蔡 换 。 可 能 赞助 商 链接 会 需要 移动 到 
侧 边栏 的 顶部 ， 或 者 需要 添加 一 个 注册 邮件 简报 的 组 件 。 

每 一 次 改变 HIML ， 都 需要 考虑 这 些 外 边 距 的 问题 。 你 得 确保 每 个 元 素 之 间 有 间距 , 但 是 容 
顺 的 顶部 〈 或 底部 ) 没有 多 余 的 间距 。 


3.5.2 ”更 通用 的 解决 万 案 : 猫 头 座 选择 器 


Web 设计 师 Heydon Pickering 曾 表 示 外 边 距 “就 像 是 给 一 个 物体 的 一 侧 涂 了 胶水 ， 而 你 还 没 
有 决定 是 否 要 将 它 贴 到 某 处 ， 或 者 还 没 想 好 要 贴 到 什么 东西 上 ”。 不 要 给 网 页 当前 的 内 容 固定 外 
边 距 , 而 是 应 该 采取 更 通用 的 方式 , 不 管 网 页 结构 如 何 变化 都 能 够 生效 。 这 就 是 Heydon Pickering 
所 说 的 迟钝 的 猎头 应 选择 器 (lobotomized owl selector ) ( 以 下 简称 猫 头 认 选 择 器 )， 因 为 它 长 这 
样 : * + *。 

该 选择 器 开头 是 一 个 通用 选择 器 (* ), 它 可 以 选中 所 有 元 素 ,后 面 是 一 个 相 邻 兄弟 组 合 天 (+ )， 
最 后 是 另 一 个 通用 选择 硕 。 它 因 形 似 一 只 眼神 空洞 的 猫头鹰 而 得 名 。 猪 头 认 选择 带 功能 接近 此 前 
介绍 的 选择 需 :， .social-pbutton + . Soula l=bButton, 但 是 它 不 会 选中 直接 跟 在 其 他 按钮 后 
面 的 按钮 ， 而 是 会 选中 下 接 跟 在 其 他 元 系 后 面 的 任何 元 素 。 也 就 是 说 , 它 会 选中 页 面 上 有 着 相同 
父 级 的 非 第 一 个 子 元 系 。 



































接 下 来 用 猫头鹰 选择 髓 给 页 面 元 素 加 上 顶部 外 边 距 。 这 样 就 会 给 侧 边栏 的 每 一 个 元 素 加 上 一 
致 的 间距 。 该 选择 需 还 会 选中 主 容 需 ， 因 为 它 是 头 部 的 相 邻 兄弟 节点 ， 也 如 你 所 愿 加 上 了 间距 。 
效果 如 图 3-23 所 示 。 
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FOLLOW US ON TWITTER 
The Franklin Running club meets at 6:00pm every Thursday at the town square. Runs are three to five miles, at your own pace. 
LIKE US ON FACEBOOK< /A> 
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图 3-23 所 有 的 相 邻 兄 肿 元 素 都 有 顶部 外 边 距 
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将 代码 清单 3-20 添加 到 你 的 样式 表 的 开头 。 我 将 body 放 在 选择 天 的 前 面 , 这 样 该 选择 大 就 
只 能 选中 body 内 的 元 素 。 如 末 直 接 使 用 猫头鹰 选择 锅 ， 它 还 会 选中 <boqy> 元 素 ， 因 为 它 是 
<head> 元 和 的 相 邻 兄弟 节点 o 


代码 清单 3-20 ”用 猎头 订 选 择 磊 全 局 设置 上 下 堆 茎 的 元 素 的 间距 
body * + * { 
margin-top: 1.5em; 
} 
说 明 ”你 也 许 会 担心 通用 选择 器 ( * ) 的 性 能 问题 。 在 IE6 中 ， 这 个 选择 器 超级 慢 ， 因 
此 开发 人 员 会 避免 使 用 它 。 现 在 不 必 担 心 了 ， 因 为 现代 浏览 器 都 能 很 好 地 处 理 。 此 外 ， 
猫 关 大选 择 器 可 能 会 减少 样式 表 中 的 选择 器 数量 , 因为 它 在 全 局 范围 内 处 理 了 大 多 数 元 
素 的 间距 问题 。 实 际 上 ， 如果 你 的 样式 表 要 处 理 的 细节 很 多 的 话 ， 猫 头 订 选择 器 的 性 能 
可 能 更 好 。 


猫头鹰 选择 占 的 顶部 外 边 距 对 侧 边 栏 有 个 副作用 。 因 为 侧 边 栏 是 主 列 的 相 邻 兄 第 元 对 ,所 以 
它 也 会 有 顶部 外 边 中 。 因 此 要 将 其 恢复 为 0, 还 需要 给 主 列 补 上 内 边 距 。 根据 代码 清单 3-21 更 新 
你 的 样式 表 。 
代码 清单 3-21 人 完成 最 后 的 样式 


.main { 
width: 70%; 











padding: lem 1.5em; 
background-color: #fff; 给 主 列 加 上 内 边 距 
border-radius: .5em; 


) 


.Sidebar { 
width: 30%; 
padding: 1.5em; 


margin-top: 0 

margin-left: 1.5em; 移 除 猫 头 认 选 择 器 
background=color: #fff; 设置 的 项 部 外 边 距 
border-radius: .5em; 


} 





完成 最 终 样 式 后 ， 页 面 如 图 3-24 所 示 。 
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Come join us! | FOULowUSONT™WTER | 
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图 3-24 ”两 列 布局 的 最 终 页 面 
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这 样 使 用 猫头鹰 选 择 从 是 需要 权衡 的 。 它 省 去 了 许多 的 需要 设置 外 边 距 的 地 方 , 但 是 在 某 些 
不 想 加 外 边 距 的 地 方 则 需要 窗 盖 。 通 常 只 在 有 并 列 元 又, 或 者 有 多 列 布 局 时 这 样 使 用 。 有 时 还 需 
要 根据 设计 ， 给 段落 和 标题 设置 特定 的 外 边 距 。 

接 下 来 的 革 市 会 有 更 多 的 例子 使 用 猫头鹰 选择 侣 ,帮助 你 理解 它 何 时 需要 权衡 。 猫头鹰 选择 
全 可 能 并 非 是 所 有 项 目的 正确 选择 ,而 且 很 难 添 加 到 已 有 项 目 中 ， 因 为 可 能 破坏 已 有 布局 , 不 过 
可 以 在 下 次 开始 做 新 网 站 或 Web 应 用 程序 时 考虑 使 用 它 。 

完整 的 样式 表 如 代码 清单 3-22 所 示 。 


代码 清单 3-22 ”最 终 的 样式 表 


:root { 


























box-sizing: border-box; 


} 


: :before, 
::after { 
box-sizing: inherit; 


} 


body { 
background-color: #eee; 
font-family: Helvetica, Arial, sans-serif; 


} 


body * + * { 
margin-top: 1.5em; 


由 


header { 
padding: lem 1.5em; 
Color: #f£fff; 
background-color: #0072b0; 
border-radius: .5em; 


} 


.Container { 
display: flex; 
} 


.main f{ 
width: 70%; 
padding: lem 1.5em; 
background-color: #fff; 
border-radius: .5em; 


} 


.Sidebar { 
width: 30%; 
padding: 1.5em; 
margin-top: 0; 


margin-left: 1.5em; 
background-color: #fff; 
border-radius: .5em; 


} 


.button-link { 
display: block; 
padding: .5em; 
GOTO ,C$ 
background-color: #0090C9; 
text-align: center; 





text-decoration: none; 
text-transform: upPpercase; 


. 


.Sponsor-link f{ 
display: block; 
COlor: #0072kb0; 
font-weight: bold; 
text-decoration: none; 


3.6 总结 





口 总 是 全 局 设置 bordqer-box， 以 便 得 到 预期 的 元 素 大 小 。 

口 避免 明确 设置 元 素 的 高 度 ， 以 免 出 现 溢出 问题 。 

口 使 用 现代 的 布局 技术 ,比如 aisplay: table 或 者 Flexbox 实现 列 等 高 或 者 垂直 居中 内 容 。 
口 如 末 外 边 距 的 行为 很 奇怪 ,就 来 取 措施 防止 外 边 距 折 印 。 

口 使 用 猎头 订 选 择 右 全 局 设置 堆 芋 元 素 之 间 的 外 边 距 。 
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第 二 部 分 


通 和 布局 





CSS 提供 了 一 些 控制 网 页 布局 的 工具 。 第 二 部 分 (第 4-~8 章 ) 将 介绍 其 
中 最 重要 的 几 个 , 包括 浮动 、Flexbox 和 定位 。 这 些 工 具 本 身 没 有 优 劣 之 分 ， 
只 不 过 实现 布局 的 方式 略 有 不 同 。 我 将 介绍 它们 的 工作 原理 , 以便 你 选择 合 
适 的 工具 来 实现 想 要 的 效果 。 











本 草 概要 

口 浮动 的 工作 原理 ， 以 及 如 何 避 开 常 见 的 陷阱 
口 容 带 折 营 和 清除 浮动 

口 媒体 对 象 和 双 容 融 模 式 

口 块 级 格式 化 上 下 文 

口 如 何 创 建 和 理解 一 个 网 格 系统 











第 一 部 分 在 最 后 介绍 了 元 素 大 小 和 间距 的 一 些 基本 概念 。 第 二 部 分 会 基于 这 些 概念 , 更 详细 
地 介绍 页 面 布 局 的 主要 方法 。 我 们 将 介绍 最 重要 的 三 种 改变 文档 流 的 方式 : 浮动 、Flexbox 和 网 
格 布 局 。 此 外 还 会 介绍 定位 ， 它 的 主要 作用 是 将 元 系 堆 合 到 其 他 元 系 之 上 。 其 中 ，Flexbox 和 网 
格 布 局 是 CSS 中 的 新 成 员 ， 二 者 的 重要 性 姓 良 置疑。 浮动 和 定位 虽然 由 来 已 人 ， 但 经 浓 被 误解 。 

第 4 章 将 自 完 介绍 浮动 ,浮动 是 网 页 布局 最 古老 的 方式 , 并且 在 过 去 很 多 年 都 是 唯一 的 方式 。 
不 过 它 有 些 让 人 换 措 不 透 。 要 想 理解 浮动 , 得 从 了 解 它 的 设计 初 袁 人 手 。 之 后 将 介绍 如 何 处 理 浮 
动 的 一 些 怪异 行为 ， 包 括 使 用 清除 浮动 (clearfix ) 工具 。 这 将 帮助 你 理解 浮动 的 行为 。 

接 下 来 ， 本章 还 将 展示 两 种 稼 见 的 网 页 布局 模式 : 双 容 带 模 式 和 媒体 对 象 。 最 后 ,你 需要 运 
用 在 本 章 所 学 的 知识 构建 一 个 页 面 结 构 化 的 通用 工具 一 一 网 格 系统 。 


4.1 ”浮动 的 设计 初 让 
虽然 最 初创 造 浮动 并 不 是 为 了 用 于 页 面 布局 , 但 它 在 布局 方面 表现 得 很 出 色 。 然 而 为 了 理解 
浮动 ， 我 们 首先 必须 牢记 它 的 设计 初衷 。 


浮动 能 将 一 个 元 系 〈 通 稼 是 一 张 图 族 ) 拉 到 其 容 带 的 一 侧 ， 这 样 文档 流 就 能 够 包围 它 (如 
图 4-1 所 示 )。 这 种 布局 在 报纸 和 杂志 中 很 剃 见 ， 因 此 CSS 增加 了 浮动 来 实现 这 种 效果 。 
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图 4-1 文本 行 包 围 了 浮动 元 素 


上 图 中 , 一 个 元 系 被 拉 到 了 左 侧 ， 它 也 可 以 浮动 到 右 侧 。 浮 动 元 系 会 被 移出 正常 文档 流 ， 并 
被 拉 到 容 船 边缘 。 文 梢 流 会 重新 排列 ,但 是 它 会 包 半 浮动 元 系 此 刻 所 占据 的 空间 。 如 宁 让 多 个 元 
系 回 同 侧 浮 动 ， 它 们 束 会 摊 春 排列 ， 如 网 4-2 所 示 。 


J 














图 4-2 ”两 个 浮动 元 系 挨 着 排列 


如 果 你 号 CSS 已 经 有 一 段 时 间 了 ， 应 该 不 会 对 这 种 行为 感到 阳 生 。 重 点 是 ， 尽 管 这 才 是 浮 
动 的 设计 初 囊 ， 我 们 却 并 不 总 是 这 样 使 用 它 。 

在 CSS 早期 ， 开 发 人 员 发 现 使 用 简单 的 浮动 就 可 以 移动 页 面 的 各 个 部 分 ， 从 而 实现 各 种 各 
样 的 布局 。 浮 动 本 里 不 是 为 了 实现 页 面 布 局 而 设计 的 , 但 是 在 近 20 年 的 时 间 里 ， 我 们 把 它 当 成 
了 布局 工具 。 

之 所 以 这 样 做 是 因为 它 是 那个 年 代 唯 一 的 选择 。 后 来 ， display: inlirne=block 和 
display: table 的 问世 才 让 我 们 有 了 别 的 方案 ， 尽 管 二 者 可 和 蔡 代 的 场景 有 限 。Flexbox 和 网 格 
布局 最 近 几 年 才 出 现 , 在 它们 出 现 之 前 , 浮动 一 下 承担 看 页 面 布局 的 重任 。 计 我 们 来 看 看 它 是 如 
何 工作 的 。 举 个 例子 ， 你 需要 构建 一 个 如 图 4-3 所 示 的 网 页 。 
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Strength “Sy Cadence 


Strength training is an important part of injury Check your stride turnover. The most efficient 
prevention. Focus on your core— especially runners take about 180 steps per minute. 
your abs and glutes. 


“Sy Change it up Focus on form 
Don't run the same every time you hit the road. Run tall but relaxed. Your feet should hit the 
Vary your pace, and vary the distance of your ground beneath your hips, not out in front of 
runs， you. 


图 4-3 ”基于 浮动 布局 的 网 页 


在 本 章 的 例子 里 , 你 需要 用 浮动 来 定位 四 个 灰色 的 盒子 , 并 且 在 盒子 里 面 将 图 片 浮动 到 文学 的 
一 侧 。 现 在 创建 一 个 空白 的 页 面 , 并 给 它 链 接 一 个 新 的 样式 表 , 然后 将 代码 清单 4-1 添加 到 页 面 中 。 


代码 清单 4-1 示例 的 HTML 








<body> 
<div class="container"> 

<header> 头 部 布局 与 
<hili>Franklin Running Club</hi1i> 第 3 章 相似 

</header> 

Te en 主 元 素 是 白色 的 盒子 , 包 
<h2>RunNnning tips< > 含 了 页 面 的 主要 内 容 
<div> 


<div class="media"> 
<img class="media-image" src="runner.png"> 
<div class="media-body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 
especially your abs and glutes. 
</D> 
</div> 
</div> 


<div class="media"> 
<img class="media-image" src="shoes.png"> 
<div class="media-body"> 
<h4>Cadence</h4> 
<p> 
Check your stride turnover. The most efficient 
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runners take about 180 steps per minute. 


; 四 个 媒体 对 象 对 应 
ET 四 个 灰色 的 盒子 
</Q1LV> 
</div> 


<div class="media"> 
<img class="media-image" 
<div class="media-body"> 


<h4>Change it up</h4> 
<p> 


src="shoes.png"> 


Don't run the same every time you hit the 
road. Vary your pace, and vary the distance 
of your runs. 
</D> 
</div> 
</div> 


<div class="media"> 
<img class="media-image" 
<div class="media-body"> 
<h4>Focus on form</h4> 
<D> 
Run tall but relaxed. Your feet should hit 
the ground beneath your hips, not out in 
front of you. 
</D> 
</div> 
</div> 


SIrCc="ruUunner.png"> 


</div> 
</main> 
</div> 
</body> 








以 上 代码 清单 给 出 了 页 面 的 结构 : 一 个 头 部 和 一 个 包含 网 员 主 要 内 容 的 主 元 系 。 主 元 素 内 是 


网 页 标题 ， 么 跟 看 一 个 匿名 的 aiv( 即 没有 类 或 ID 的 div)。 这 有 助 于 对 四 个 灰色 的 媒体 元 素 进 
行 分 组 ， 每 个 媒体 元 条 包含 一 个 图 片 和 一 个 正文 元 素 。 


之 /> 


提示 。 通常， 最 简单 的 方式 是 先 将 网 页 的 大 块 区 域 布局 好 ， 再 逐 级 布局 内 部 的 小 元 素 。 





在 开始 浮动 元 系 前 ， 要 先 将 网 页 的 外 层 结构 样式 与 好 。 将 代码 清单 4-2 添加 到 样式 表 中 。 
代码 清单 4-2 ”页面 的 基础 样式 


:TOOL 上 
box-sizing: border-box; 
} 
全 局 设置 为 border-box 


(参见 第 3 章 ) 
: :before, 


::after { 


box-sizing: inherit; 


* 
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body { 
background-color: #eee; 
font-family: Helvetica, Arial, sans-serif; 


} 


body * + * { 


margin-top: 1.5em; 用 猫 头 认 选 择 器 设置 全 局 
} 外 边 距 参见 第 3 章 ) 
header { 
padding: lem 1.5em; 
Color: #fff; ee 
background-color: #0072b0; 头 部 的 颜色 
和 内 边 距 


border-radius: .5em; 
margin-bottom: 1.5em; 


) 


.main 1{ 
padding: 0 1.5em; 
background-color: #f£fff; 
border-radius: .5em; 


} 
以 上 代码 设置 了 页 面 的 基础 样式 ， 包 括 第 3 草 中 提 到 的 一 个 全 局 设 定 的 box-sizing 和 猫头鹰 


主 元 素 〈 白 色 的 容器 ) 
的 颜色 和 内 边 距 














选择 天 。 接 下 来 需要 设置 页 面 内 容 的 宽度 ， 如 图 4-4 所 示 。 注 意 观 察 页 面 两 侧 相等 的 浅 灰 色 页 边 
中 ， 以 及 头 部 和 主 容 涟 里 等 宽 对 齐 的 内 容 。 
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页 


Strength 


Strength training is an important part of injury prevention. Focus on your core— especially your abs and glutes. 
Cadence 


图 4-4 限定 宽度 的 页 面 


这 种 布局 常用 于 将 网 页 内 容 届 中 。 通 过 将 内 容 放置 到 两 个 般 套 的 容 硕 中 , 然后 给 内 层 的 容 融 
设置 外 边 距 ， 让 它 在 外 层 容 需 中 届 中 (如 图 4-5 所 示 )。 Web 开发 人 员 Brad Westfall 把 这 种 布局 
方式 叫 作 双 容 器 模式 ( double container pattern )。 
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1 Strength training is an Importan! part of Injury prevention. Focus on your core— especially your abs and glutes 
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Cadence 





Se = === =========L------ 
图 4-5” 双 容器 模式 
在 本 例 中 ，<body> 就 是 外 层 容 益 。 因 为 它 默认 是 100% 的 网 页 宽度 ,所 以 不 用 给 它 添 加 新 的 
样式 。 在 <body> 内 部 ， 整 个 网 页 的 内 容 放 在 了 了 <div class="container">， 也 就 是 内 层 容 融 
中 。 对 于 内 层 容器 ， 需 要 设置 一 个 nax_wiath， 并 将 外 边 距 设置 为 auto， 使 内 容 居中 。 将 代码 
清单 4-3 添加 到 你 的 样式 表 中 。 


代码 清单 4-3” 双 容 益 模式 的 样式 








.Container { 设置 最 大 宽度 
max-width: 1080px; 为 1080px 
margin: 0 auto; 
] 左右 外 边 距 设置 为 auto, 能 够 让 内 层 容 器 自动 
填充 可 用 空间 ， 从 而 实现 水 平 居中 的 效果 


这 里 使 用 了 max-wiath 而 不 是 wiath， 因 此 如 果 视 口 宽 度 小 于 1080px 的 话 ， 内 层 容 右 就 
能 缩小 到 1080px 以 下 。 换 句 话 说 ， 在 小 视 口 上 ， 内 层 容 问 会 填 满 屏 从 ， 在 大 视 口 上 ， 它 会 扩展 
到 1080px。 这 种 方式 能 有 效 避 免 在 小 屏幕 上 出 现 水 平 滚动 条 。 


是 否 还 有 必要 学 习 浮 动 

Flexbox 正在 迅速 取代 浮动 在 页 面 布 局 中 的 地 位 。 对 新 手 开 发 人 员 而 言 ， Flexbox 的 行为 很 
直观 ， 可 预测 性 更 好 。 你 可 能 会 问 是 否 还 有 必要 学 习 浮 动 ，CSS 浮动 的 时 代 是 不 是 结束 了 ? 

在 现代 浏览 器 中 , 不 用 浮动 也 能 比 过 去 更 好 地 实现 布局 , 甚至 可 以 完全 弃 用 浮动 。 但 是 如 
果 要 支持 正 浏 览 器 ， 现 在 放弃 浮动 还 为 时 过 早 。 只 有 JIE10 和 下 11 支持 Flexbox， 而 且 还 有 一 
些 bug。 如 果 不 想 碰 到 bug， 或 者 需要 支持 旧版 浏览 器 ， 浮 动 也 许 是 更 好 的 选择 。 

另外 ， 如 果 你 在 支持 旧 代 码 库 ， 它 很 可 能 用 到 了 浮动 布局 。 为 了 维护 旧 代 码 ， 也 需要 了 解 
浮动 的 工作 原理 。 还 有 一 点 ,浮动 布局 通常 不 需要 那么 多 的 标记 ， 新 的 布局 方法 则 需要 添加 额 
外 的 容器 元 素 。 如 果 你 写 样 式 时 不 允许 修改 标记 ， 浮 动 更 能 满足 你 的 需求 。 

此 外 , 要 实现 将 图 片 移动 到 网 页 一 侧 , 并 且 让 文字 围绕 图 片 的 效果 , 浮动 仍然 是 唯一 的 方法 。 
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4.2 容器 折 妓 和 清除 浮动 


过 去 ， 浮 动 的 行为 经 常 受 到 浏 唤 带 bug 的 干扰 ， 特 别 是 在 IE6 和 下 7 中 。 笠 亏 这 些 训 览 融 几 
乎 已 经 淡出 市 场 了 , 我 们 不 必 再 担心 那些 bug 了。 现在 我 们 可 以 保证 各 种 浏 览 硕 对 浮动 的 处 理 是 
一 致 的 O 

但 是 浮动 仍 有 一 些 行 为 会 让 你 措手不及 。 这 些 并 不 是 bug， 而 是 因为 浮动 严格 遵循 了 标准 。 
让 我 们 来 看 看 浮动 如 何 工 作 ， 以 及 怎样 调整 浮动 的 行为 来 实现 理想 的 布局 。 


4.2.1 ”理解 容器 折 双 


在 上 述 示 例 的 基础 上 ， 将 四 个 媒体 盒子 浮动 到 左 侧 ， 丈 能 立刻 看 到 容 侣 折合 的 问题 ( 如 图 4-6 
所 示 ), 
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Strength 


ns . I Check your stride turnover. The most efficient runners take about 
Strength training is an important part of injury prevention. Focus 180 steps per minute. 
on your core— especially your abs and glutes. 


2 


Change it up 


Don't run the same every time you hit the road. Vary your pace, 
Aand vans tha dAictannn mf arnir mime 
大 vi 一 MPae A 
图 4-6“ 子 元 素 序 动 时 ， 容 需 出 现 折 和 县 


白色 的 背景 区 域 是 怎么 回 事 ?” 日 色 背 景 的 确 出 现在 了 页 面 标题 (“Running tips”) 后 面 ， 但 是 
并 没有 癌 下 延伸 , 直到 包含 媒体 盒子 。 为 了 观察 这 一 现象 , 将 代码 清单 4-4 添加 到 你 的 样式 表 中 。 
然后 我 们 再 解释 问题 的 原因 以 及 修复 方法 。 
代码 清单 4-4 ”让 四 个 媒体 盒子 浮动 到 左 侧 

ee | 让 媒体 盒子 都 








float: left; 浮动 到 左 侧 

width: 50%; ee 

Badding: 1 Sew; 设置 宽度 ， 让 页 面 在 水 平方 向 
. . 7 A + < 人 会 

background-color: #eee; 上 能 放下 两 个 媒体 盒子 


border-radius: 0.5em; 
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给 媒体 盒子 设置 好 浅 灰色 的 背景 后 , 你 以 为 容 问 的 日 色 背 景 会 出 现在 媒体 盒子 的 后 面 (或 者 
周围 ) 然而 白色 背景 延伸 到 第 一 排 媒 体 盒子 的 上 面 就 结束 了 。 这 是 怎么 回 事 ? 

这 是 因为 译 动 元 系 不 同 于 普通 文档 流 的 元 素 , 它们 的 高 度 不 会 加 到 父 元 率 上 。 这 可 能 看 起 来 
很 奇怪 ， 但 是 恰好 体现 了 浮动 的 设计 初衷 。 

本 章 开 头 已 经 说 过 ， 浮 动 是 为 了 实现 文字 围绕 浮动 元 系 排列 的 效 末 。 在 段落 里 浮动 图 片 时 ， 
段落 的 高 度 并 不 会 增长 到 能 够 容纳 该 图 片 。 也 驶 是 说 ， 如 朱 疼 上 比 段落 文字 高 ， 下 一 段 会 生 接 从 
上 一 段 的 文学 下 面 开 始 ， 两 段 文子 部 会 围绕 浮动 的 图 片 排列 ， 如 图 4-7 所 示 。 

















图 4-7 一 个 容 带 内 的 浮动 元 系 会 扩展 到 为 一 个 容 瘟 ， 这 样 两 个 容 作 的 文字 就 能 围绕 浮 
动 元 条 排列 ( 虚线 高 完 的 部 分 是 容 右 ) 


在 主 元 系 里 , 除了 页 面 标题 ,其 他 元 系 部 设置 了 浮动 ， 所 以 容 表 的 高 度 只 包含 页 面 标题 的 高 








度 , 浮动 的 媒体 元 厅 则 扩展 到 主 元 系 的 日 色 背 景 下 面 。 这 种 行为 并 不 是 我 们 想 要 的 ， 主 元 系 应 该 
问 下 扩展 到 包含 藉 色 的 盒子 (如 图 4-8 所 示 )。 让 我 们 一 起 来 解决 这 个 问题 吧 。 


Franklin Running Club 





Running tips 
Cadence 
Strength 


二 有 Check your stride turnover. The most efficient runners take about 
Strength training is an important part of injury prevention. Focus 180 steps per minute. 
on your core 一 especially your abs and glutes. 


-2 


Change it up 


Don't run the same every time you hit the road. Vary your pace, 
and vary the distance of your runs. 


类 


图 4-8 容 角 加 下 扩展 ， 包 于 了 译 动 元 素 
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一 个 解决 办 法 是 使 用 跟 浮动 配套 的 clear 属性 。 将 一 个 元 素 放 在 主 容 融 的 末尾 ， 并 对 它 使 
用 clear, 这 会 让 容 融 扩展 到 浮动 元 素 下 面 。 将 代码 清单 4-5 和 暂时 添加 到 页 面 里 , 就 能 看 到 clear 
的 效 末 。 


代码 清单 4-5 ” 容 带 问 下 扩展 ， 百 到 包含 清除 序 动 的 元 系 


<main class="main"> 











<div style="clear: both"></div> 


在 main 容器 的 末尾 增加 一 个 


</main> 带 有 clear 属性 的 空 div 


clear: both 声明 让 该 元 素 移动 到 浮动 元 素 的 下 面 ， 而 不 是 侧面 。clear 的 值 还 可 以 设置 
为 1eft 或 者 right, 这 样 只 会 相应 地 清除 向 左 或 者 向 右 浮动 的 元 素 。 因 为 空 div 本 身 没有 浮动 ， 
所 以 容器 就 会 扩展 ， 直 到 包含 它 ， 因 此 也 会 包含 该 div 上 面 的 浮动 元 素 。 

这 种 方法 的 确 能 实现 预期 的 行为 , 但 是 不 雅 。 要 在 HTML 里 添加 不 必要 的 标记 , 才能 实现 
本 应 该 由 CSS 实现 的 效果 。 因 此 我 们 要 删 掉 上 面 的 空 div 标签 ， 用 纯 CSS 方案 来 实现 相同 的 
效果 。 








4.2.2 ”理解 清除 浮动 


不 用 额外 的 aiv 标签 ， 我 们 还 可 以 用 伪 元 素 ( pseudo-element ) 来 实现 。 使 用 : :after 伪 元 
素 选 择 器 ， 就 可 以 快速 地 在 DOM 中 在 容 需 末尾 添加 一 个 元 素 ， 而 不 用 在 HTML 里 添加 标记 。 





伪 元 素 一 一 一 种 特殊 的 选择 器 ， 可 以 选中 文档 的 特定 部 分 。 伪 元 杀 以 双 冒 号 (::) 
开头 ， 大 部 分 浏览 器 为 了 向 后 兼容 也 支持 单 冒 号 的 形式 。 最 常见 的 伪 元 素 


是 ::before 和 ::after， 用 来 向 元 素 的 开始 或 者 结束 位 置 播 入 内 容 。 详 见 附录 A。 





代码 清单 4-6 所 示 的 是 解决 包含 浮动 问题 的 一 种 常见 做 法 ， 叫 作 清 除 浮动 ( clearfix ) 有 些 
开发 人 员 将 其 简称 为 cf ， 正 好 还 能 表示 “包含 浮动 ”( contain float )。 将 代码 清单 4-6 添加 到 你 的 
样式 表 中 。” 


代码 清单 4-6 ”用 清除 浮动 来 包含 浮动 元 系 


选中 容器 末尾 
.Clearfix: :after { 的 伪 元 素 


display: block; 

content: " "; 将 伪 元 素 的 aisplay 设置 为 非 inline， 并 给 定 

clear: both; 一 个 content 值 ， 以 便 让 伪 元 素 出 现在 文档 中 
让 伪 元 素 清除 容器 


中 的 所 有 浮动 


中 还 需要 在 HTML 中 为 主 元 素 添 加 一 个 clearfix 类 名 。 译 者 注 
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请 注意 ， 要 给 包含 浮动 的 元 素 清除 浮动 ， 而 不 是 给 别 的 元 素 ， 比 如 浮动 元 素 本 身 ， 或 包含 浮 
动 的 元 素 后 面 的 兄弟 元 素 。 


警告 ”这 些 年 来 ， 清 除 浮动 经 历 了 多 个 迭代 版 本 ,其 中 一 些 版 本 比 其 他 版 本 更 加 复杂 。 
很 多 版 本 为 了 修复 不 同 浏览 器 的 bug 而 存在 细微 差异 。 大 多 数 的 变通 方法 现在 已 经 不 必 
要 了 ， 但 是 上 面 给 出 的 例子 里 还 有 一 个 变通 处 理 : content 的 值 包含 了 空格 。 当 然 ， 
空 字符 串 〈("" ) 也 能 生效 ， 但 是 在 旧版 的 Opera 浏览 器 中 有 个 隐藏 的 bug， 需 要 添加 一 
人 空格 字符 才能 解决 。 我 倾向 于 保留 这 个 空格 ， 毕 竞 它 也 不 容 萄 被 用 户 发 现 。 


这 个 清除 浮动 还 有 个 一 致 性 问题 没有 解决 : 浮动 元 素 的 外 边 中 不 会 折 著 到 清除 浮动 容 絮 的 外 
部 ， 非 浮动 元 系 的 外 边 距 则 会 正常 折 欠 。 比 如 在 前 面 的 页 面 里 , 标题 “Running tips” 紧 挨 着 日 色 











的 <main> 元 系 的 顶部 〈《 如 图 4-8 所 示 )， 它 的 外 边 中 在 容 冀 外 面 折合 了 。 

一 些 开 发 人 员 更 喜欢 使 用 清除 浮动 的 一 个 修改 版 , 它 能 包含 所 有 的 外 边 距 , 这样 更 符合 预期 。 
使 用 这 个 修改 版 ， 能 防止 标题 项 部 的 外 边 距 在 main 元 素 的 外 部 折 钱 。 如 图 4-9 所 示 ， 在 标题 上 
面 适当 留 日 。 
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Running tips 
Cadence 
Strength 


ee Check your stride turnover. The most efficient runners take about 
Strength training is an important part of injury prevention. Focus 180 steps per minute. 
on your core— especially your abs and glutes. 


< 


Change it up 


Don't run the same every time you hit the road. Vary your pace, 
and vary the distance of your runs. 


图 4-9 清除 浮动 的 修改 版 包含 了 所 有 的 浮动 元 素 和 外 边 距 。 标 题 “Running tips” 顶 部 的 
外 边 距 现在 包含 在 白色 的 <main> 元 素 内 
如 代码 清单 4-7 所 示 ， 将 这 个 修改 版 更 新 到 清除 浮动 的 样式 表 中 。 


代码 清单 4-7 修改 清除 浮动 的 代码 ， 让 其 包含 所 有 的 外 边 距 
Clearfix:*before, 让 : :before 和 : :after 
.Clearfix: :after { 伪 元 素 都 显示 出 来 
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display: table; 
CONGSNt: Ys 防止 伪 元 素 的 
} 外 边 距 折 县 
.Clearfix: :after { 
clear: both; 
} 


只 有 ::after 伪 元 


素 需 要 清除 浮动 





这 个 版 本 使 用 display: table 而 不 是 LeDladyv. BLOGks 给 : :pefore 和 ::after 伪 元 
系 都 加 上 这 一 属性 , 所 有 子 元 素 的 外 边 距 都 会 包含 在 容 硕 的 顶部 和 底部 之 间 。 下 面 的 附加 栏 详 细 
地 解释 了 为 什么 用 “清除 浮动 和 加 工交 站 站 六 六 tabLe” 能 够 生效 。 


提示 当 我 们 不 想 要 外 边 距 折 营 时 ， 这 个 版 本 的 清除 浮动 非常 有 用 。 


用 什么 版 本 的 清除 浮动 取决 于 你 。 有 些 开 发 人 员 认 为 外 边 距 折合 是 CSS 里 的 基础 特性 ， 
此 他 们 选择 不 包含 外 边 距 。 不 过 以 上 两 个 版 本 的 清除 译 动 都 没有 包 合 浮动 元 素 的 外 边 距 , 因此 其 
他 人 会 选择 修改 版 以 获得 更 一 致 的 行为 。 两 种 观点 都 有 上 自己 的 优势 。 

















清除 浮动 和 display: table 

在 清除 浮动 时 使 用 display: table 能 够 包含 外 边 距 ， 是 因为 利用 了 CSS 的 一 些 特性 。 
创建 一 个 Qisplav: table 元 素 (或 者 是 本 例 的 伪 元 素 )， 也 就 在 元 素 内 隐 式 创建 了 一 个 表格 
行 和 一 个 单元 格 。 因 为 外 边 距 无 法 通过 单元 格 元 素 折 有 登 ( 参见 第 3 草 )， 所 以 也 无 法 通过 设置 
了 display: table 的 伪 元 素 折 党 。 

看 起 来 似乎 使 用 display: table-cell 也 能 达到 相同 的 效果 ， 但 是 clear 属性 只 能 对 
块 级 元 素 生 效 。 表 格 是 块 级 元 素 ， 但 是 单元 格 并 不 是 。 因 此 ，clear 属性 无 法 跟 display: 
table-cell 一 起 使 用 。 所 以 要 用 display: table 来 清除 浮动 ， 同 时 利用 隐 式 创建 单元 格 
来 包含 外 边 距 。 


4.3 ”出 乎 意料 的 “浮动 陷阱 ” 


现在 页 面 里 的 白色 容 套 已 经 能 够 包含 浮动 的 媒体 元 素 了 , 但 是 出 现 了 男 一 个 问题 ; 四 个 媒体 
盒子 没有 如 预期 那样 均匀 地 占据 两 行 。 虽 然 前 两 个 盒子 (“Strength” 和 “Cadence”) 符合 预期 ， 
但 是 第 三 个 盒子 ( “Change it up”) 出 现在 了 右边 ， 也 就 是 第 二 个 盒子 的 下 方 ， 导 致 第 一 个 盒子 
下 面 出 现 了 一 片 非常 大 的 空白 。 这 是 因为 浏览 硕 会 将 浮动 元 系 尽 可 能 地 放 在 靠 上 的 地 方 ， 如 网 4-10 
所 示 。 
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图 4-10 三 个 左 浮动 的 盒子 : 如 果 盒 子 1 比 盒子 2 高 ， 则 盒子 3 不 会 浮动 到 最 左边 ， 
而 是 浮动 到 盒子 1 的 右边 


因为 盒子 2 比 盒子 1 矮 ， 所 以 它 下 面 有 多 余 的 空间 给 盒子 3。 盒 子 3 会 “ 抓 住 ”盒子 1， 而 
不 是 清除 盒子 1 的 浮动 。 因 此 盒子 3 不 会 浮动 到 最 左边 ， 而 是 浮动 到 盒子 1 的 右 下 角 。 

这 种 行为 本 质 上 取决 于 每 个 浮动 块 的 高 度 。 即 使 高 度 相 差 jpx， 也 会 导致 这 个 问题 。 相 反 ， 
如 果 盒 子 1 比 盒子 2 矮 ， 盒子 3 就 没 法 抓 住 盒子 1 的 边缘 。 除 非 以 后 内 容 改 变 导 致 元 素 高 度 发 生 
变化 ， 否 则 就 不 会 看 到 这 种 现象 。 

众多 的 元 素 浮 动 到 同一 侧 ， 如 果 每 个 浮动 盒子 的 高 度 不 一 样 ， 最 后 的 布局 可 能 千变万化 。 同 
理 ， 改 变 浏览 需 的 宽度 也 会 造成 相同 的 结果 ， 因 为 它 会 导致 换行 ,从 而 改变 元 素 高 度 。 而 我 们 真 
正 想 要 的 是 每 行 有 两 个 浮动 合子， 如 图 4-11 所 示 。 





Franklin Running Club 


Running tips 
Cadence 
Strength Check your stride turnover. The most efficient runners take 


about 180 steps per minute. 





Strength training is an important part of injury prevention . 
Focus on your core 一 especially your abs and glutes. 


页 


Dont run the same every time you hit the road. Vary your Focus on form 

pace, and vary the distance of your runs. 
Run tall but relaxed. Your feet should hit the ground beneath 
your hips, not out in front of you. 





图 4-11 每 行 两 个 元 素 : 第 二 行 的 媒体 元 素 应 该 清除 第 一 行 元 素 的 浮动 
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要 想 修复 这 个 问题 很 简单 : 清除 第 三 个 浮动 元 素 上 面 的 浮动 。 更 通用 的 做 法 是 , 清除 每 行 的 
第 一 个 元 素 上 面 的 浮动 。 由 于 已 知 每 行 有 两 个 盒子 , 因此 只 需要 清除 每 行 的 第 奇数 个 元 素 上 面 那 
行 的 浮动 即 可 。 你 可 以 用 :nth-child() 伪 类 选择 天 选中 这 些 目标 元 素 。 将 代码 清单 4-8 添加 到 
你 的 样式 表 中 。 


代码 清单 4-8 使 用 :nth-child() 选 择 器 选取 第 奇数 个 媒体 元 素 























.media { 
float: left; 
width: 50%; 





padding: 1.5em; 
background-color: #eee; 
border-radius: 0.5em; 


} 


.media:nth-child(odd) { A 
| 每 个 新 行 清 除了 上 面 
clear: left, Fe 
) 一 行 的 浮动 


即使 以 后 给 页 面 添加 更 多 元 素 ， 这 上段 代码 仍然 有 效 。 它 作用 于 第 一 、 第 三 、 第 五 个 元 素 ， 等 
和 等。 如 果 每 行 需要 三 个 元 素 ， 则 可 以 通过 .media:nth-chi1lgd (3n+1) 来 每 隔 两 个 元 素 选 一 个 元 
素 。 更 多 关于 :nth-chila 选择 器 的 用 法 参见 附录 A。 























说 明 上 面 这 种 清除 每 行 浮 动 的 技术 要 求知 道 每 行 有 几 个 元 素 。 如 果 宽 度 不 是 通过 百 分 
比 米 定义 的 ， 那 么 随 着 视 口 宽 度 的 改变 ， 每 行 的 元 素 个 数 可 能 会 变化 。 这 种 情况 下 ,最 


好 使 用 别 的 布局 方案 ， 比 如 Flexbox 或 者 inline-block 元 素 。 

接 下 来 给 媒体 元 素 加 上 外 边 距 来 拉 开 距离 。 前面 的 猪头 磨 选 择 需 也 会 给 第 一 个 元 素 之 外 的 每 
个 元 素 加 上 顶部 外 边 距 ， 因为 这 会 导致 第 一 行 的 元 素 无 法 对 齐 , 所 以 还 需要 重 置 媒体 元 素 的 顶部 
外 边 距 。 如 代码 清单 4-9 所 示 ， 更 新 样式 表 。 


代码 清单 4-9 给 媒体 元 素 讨 加 外 边 距 


.media { A 
float: left:; 给 每 个 媒体 元 素 加 上 
右 侧 和 底部 的 外 边 距 


margin: 0 1.5em 1.5em 0; 


width: calc(50% - 1.5em).; 
padding: 1.5em; 从 宽度 里 减 去 外 边 距 , 防 











background-color: #eee; 止 出 现 不 必要 的 换行 
border-radius: 0.5em; 


和 


.media:nth-child(odd) f{ 
clear: left: 


} 
给 媒体 元 素 加 上 右 外 边 距 后 ， 一 行 放 不 下 两 个 元 系 ， 因 此 需要 用 calc () 从 宽度 里 减 去 右 外 
边 距 的 值 。 
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4.4 媒体 对 象 和 BFC 


现在 四 个 灰色 盒子 已 经 布局 好 了 ，,， 接 下 来 看 看 里 面 的 内 容 。 我 们 设想 的 是 让 图 片 在 一 侧 , 一 
段 文字 出 现在 图 片 的 劳 边 (如 网 4-12 所 示 )。 这 是 一 种 很 典型 的 网 页 布局 ，Web 开发 人 员 Nicole 
Sullivan 把 这 种 布局 称 作 “媒体 对 象 ”。 


ee | Change it up 


Don't run the same every time you hit the road. 
Vary your pace, and vary the distance of your 
runs. 











图 4-12 ”媒体 对 象 模式 : 图 片 在 左边 ,一段 描述 内 容 在 右边 


这 种 布局 模式 有 好 几 种 实现 方案 ,包括 Flexbox 和 表格 布局 ， 但 这 里 我 们 用 浮动 。 媒 体 对 象 
的 HTML 标记 如 下 所 示 。 





<div class="media"> 
<img class="media-image" src="shoes.png"> 
<div class="media-body"> 
<h4>Change it up</h4> 
<D> 
Don't run the same every time you hit the 
road. Vary your pace, and vary the distance 
of your runs. 
</D> 
</div> 
</div> 


我 给 媒体 对 象 的 左边 和 右边 分 别 添加 了 media-image 和 media-body 类 , 以便 选 中 和 定位 
元 素 。 首 先 将 图 片 浮动 到 左边 。 如 图 4-13 所 示 ， 仅 仅 将 图 片 浮动 到 左边 还 不 够 。 如 果 文 字 很 长 ， 
它 会 包围 浮动 元 了 水 。 这 是 正 篆 的 浮动 行为 ， 但 是 不 符合 我 们 的 需求 。 


< it up 


Dont run the same every time you hit the road. 
Vary your pace, and vary the distance of your runs. 





图 4-13 文本 包围 了 浮动 的 图 片 ， 不 符合 我 们 的 需求 


将 代码 清单 4-10 添加 到 样式 表 中 ， 网 页 的 样式 就 会 像 图 4-13 那样 ， 稍 后 我 们 会 看 看 如 何 修 
复 这 个 问题 。 另 外 ， 这 段 代 码 还 删 掉 了 嫁 体 正文 和 标题 的 项 部 外 边 距 。 
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代码 清单 4-10 ”将 媒体 对 象 的 图 片 浮动 到 左边 
.media-image { 将 图 片 浮动 


float: left; 
， "0 到 左 侧 





.media-body { 
margin-top: 0; 


删除 猫头鹰 选择 器 所 





添加 的 项 部 外 边 距 
a 覆盖 用 户 代理 样式 所 
| Ee 添加 的 顶部 外 边 距 








为 了 解决 文字 包围 图 片 的 问题 ， 还 要 更 加 这 入 地 了 解 序 动 的 工作 原理 。 
4.4.1 BFC 


如 果 在 浏览 瘟 开 发 者 工具 里 检查 媒体 正文 ( 单 击 鼠 标 右 键 ， 选 择 检查 或 者 检查 元 杂 )， 就 会 
发 现 它 的 傅 子 扩展 到 了 最 左边 ， 因 此 它 会 包围 浮动 的 图 片 ( 如 图 4-14 左边 所 示 )。 现 在 文字 围绕 
着 图 片 , 但 是 只 要 清除 了 图 片 底部 的 浮动 ,正文 就 会 立刻 移动 到 媒体 盒子 的 左边 。 而 我 们 真正 想 
要 的 是 将 正文 的 左 侧 靠 者 浮动 图 片 的 右 侧 排列 ( 如 图 4-14 右边 所 示 )。 


. SY Change it up , “SH 'Change it up 
' 1 1 


1 

Dont run the same every time you hit the road. ， ;Don't run the same every time you hit the road. ， 

IVary your pace, and vary the distance of your runs. 1 'Vary your pace, and vary the distance of your : 
St NS Tee iruns,. 

















图 4-14 ( 左 ) 媒体 对 象 里 的 文字 默认 围绕 浮动 图 片 ;( 右 ) 给 媒体 正文 建立 BFC 之后， 
文字 就 不 会 跟 浮 动 图 片 重 鞋 

为 了 实现 右边 这 种 布局 ， 需 要 为 正文 建立 一 个 块 级 格式 化 上 下 文 (block formatting context， 
BFC )。 BFC 是 网 页 的 一 块 区 域 , 元 系 基 于 这 块 区 域 布局 。 虽然 BFC 本 时 是 环绕 文档 流 的 一 部 分 ， 
但 它 将 内 部 的 内 容 与 外 部 的 上 下 文 隔离 开 。 这 种 隔离 为 创建 BFC 的 元 素 做 出 了 以 下 3 件 事情 。 

(1) 包含 了 内 部 所 有 元 素 的 上 下 外 边 距 。 它 们 不 会 跟 BFC 外 面 的 元 素 产 生 外 边 距 折 蕾 。 

(2) 包含 了 内 部 所 有 的 浮动 元 素 。 

(3) 不 会 跟 BFC 外 面 的 浮动 元 素 重 三。 

简 而 言 之 ，BFC 里 的 内 容 不 会 跟 外 部 的 元 素 重 登 或 者 相互 影响 。 如 采 给 元 素 增加 clear 属 
性 ， 它 只 会 清除 目 身 所 在 BFC 内 的 浮动 。 如 采 强 制 给 一 个 元 系 生 成 一 个 新 的 BFC， 它 不 会 跟 其 
他 BFC 重 装 。 

给 元 素 添 加 以 下 的 任意 属性 值 都 会 创建 BFC。 

口 float: left 或 ph 不 为 none 即 可 。 

口 overfliow: Lidden、 atto 或 soroll, 不 为 去 18151G 部 梧 。 
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Ddisplay: inline-block、 table-cell、 table-caption、 flex、 inline-flex.、 
gridq 或 inline-grid。 拥 有 这 些 属 性 的 元 系 称 为 块 级 容器 ( block container )。 


D position: absolute Bk position: fixedo 


说 明 ”网 页 的 根 元 素 也 创建 了 一 个 顶级 的 BFC。 


4.4.2 ”使 用 BFC 实 现 媒体 对 象 布局 
只 要 给 媒体 正文 创建 BFC， 网 页 的 布局 就 会 符合 预期 ( 如 图 4-15 所 示 )。 通 常 是 给 元 素 设 置 4 


OVverf low 值 hidden 或 者 auUtoo 














Franklin Running Club 





Running tips 
Strength < Cadence 
Strength training is an important part of injury Check your stride turnover. The most efficient 
prevention, Focus on your core— especially runners take about 180 steps per minute. 
your abs and glutes. 


Vary your pace, and vary the distance of your ground beneath your hips, not out in front of 
runs. you. 


< Change it up Focus on form 
Don't run the same every time you hit the road. Run tall but relaxed. Your feet should hit the 


图 4-15 给 所 有 媒体 正文 创建 BFC 
接 下 来 设置 样式 表 里 overflow 的 值 。 按 照 代 码 清单 4-11 更 新 你 的 样式 表 。 
代码 清单 4-11 添加 overflow: auto， 创 建 一 个 新 的 BFC 


.media { 
float: left; 
margin: 0 1.5em 1.5em 0; 
width: calc(50% - 1.5em); 
padding: 1.5em; 
background-color: #eee; 
border-radius: 0.5em; 


.media:nth-child(odd) { 
clear: left.; 


.media-image { 给 图 片 添 加 一 个 外 边 距 ， 
illoate lett; 让 它 与 正文 中 间 出 现 间 隔 
margin-right: 1.5em; 


.media-body { 


Overflow: auto ，; 
margin-top: 0; 创建 一 个 新 的 BFC， 这 样 正文 


} 就 不 会 跟 浮动 的 图 片 重 又 


.media-body h4 f{ 
margin-top: 0; 


’ 


使 用 overflow: auto 通常 是 创建 BFC 最 简单 的 一 种 方式 。 也 可 以 使 用 前 面 提 到 的 其 他 方 
式 , 但 是 有 些 问 题 需要 注意 ， 比 如 ,使 用 浮动 或 者 inline-block 方式 创建 BFC 的 元 素 宽度 会 
变 成 100%， 因 此 需要 限制 一 下 元 系 的 宽度 ， 防 止 因为 过 宽 而 换行 ， 寻 致 内 容 移动 到 浮动 图 片 的 
下 面 。 相 反 ， 使 用 table-cell 方式 显示 的 元 素 ， 其 宽度 只 会 刚好 容纳 其 中 的 内 容 ， 因 此 需要 
设置 一 个 较 大 的 宽度 ， 强 制 使 其 填 满 剩余 空间 。 


说 明 茶 些 情况 下 ，BFC 中 的 内 容 可 能 还 会 与 别 的 BFC 的 内 容重 登 。 比 如 ， 内 容 溢 出 
了 容器 〈 比 如 内 容 太 宽 ) 或 者 因为 仙 外 边 距 叶 致 内 容 被 拉 到 容器 外 面 。 


关于 媒体 对 象 的 更 多 信息 , 请 阅读 Nicole Sullivan 的 大 作 The Media Object Saves Hundreds 
of Lines of Code。 这 篇 文章 探讨 的 术语 面 回 对 象 的 CSS ( OOCSS ) 一 一 将 在 本 书 第 9 草 这 入 
讲解 。 


4.5 网 格 系统 


现在 整个 页 面 的 布局 已 经 创建 好 了 , 但 是 还 存在 一 些 不 足 。 最 主要 的 问题 是 ,无 法 轻松 地 复 
用 样式 表 中 的 内 容 。 现 在 媒体 对 象 的 宽度 是 50%， 因 此 一 行 有 两 个 元 素 。 如 果 想 要 复 用 前 面 的 设 
计 ， 但 需要 一 行 放 三 个 元 系 ， 那 又 该 怎么 办 呢 ? 

一 种 比较 普 志 的 做 法 是 借助 网 格 系统 提高 代码 的 可 复 用 性 。 网 格 系统 提供 了 一 系列 的 类 名 ， 
可 添加 到 标记 中 , 将 网 页 的 一 部 分 构造 成 行 和 列 。 它 应 该 上 只 给 容 表 设置 宽度 和 定位 ,不 给 网 页 提 
供 视 觉 样式 ， 比 如 颜色 和 边框 。 知 要 在 每 个 容 带 内 部 深 加 新 的 元 素来 实现 想 要 的 视觉 样式 。 

大 部 分 流行 的 CSS 框 染 包含 了 自己 的 网 格 系统 。 它 们 的 实现 细节 各 不 相同 ， 但 是 设计 思想 
相同 : 在 一 个 行 容 希 里 放置 一 个 或 多 个 列 容 需 。 列 容 融 的 类 决定 每 列 的 宽度 。 接 下 来 构建 一 个 网 
格 系统 ， 这 样 你 就 能 掌握 它 的 工作 原理 ， 进 而 应 用 到 网 页 中 。 


































































































CSS 框架 一 一 一 个 预 编译 的 CSS 代码 库 , 提供 了 Web 开发 中 常见 的 样式 模式 。 它 
能 够 帮助 快速 搭建 原型 或 者 提供 一 个 稳定 的 样式 基础 ,辅助 构建 新 样式 。 常见 的 框 


架 包 括 Bootstrap、Foundation 以 及 Pure。 
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4.5.1 “理解 网 格 系统 


要 构建 一 个 网 格 系统 ， 首 和 完 要 定义 它 的 行为 。 通 党 网 格 系统 的 每 行 被 划分 为 特定 数量 的 列 ， 
一 般 是 12 个 ， 但 也 可 以 是 其 他 数 。 每 行 子 元 素 的 宽度 可 能 等 于 1~12 个 列 的 冤 度 。 

图 4-16 展示 了 一 个 12 列 网 格 中 不 同 的 行 。 第 一 行 有 6 个 1 列 宽 的 于 元素 和 3 个 2 列 宽 的 子 
元 系 。 第 二 行 有 一 个 4 列 视 的 子 元 素 和 一 个 8 列 宽 的 子 元 系 。 因 为 每 行 子 元 系 的 宽度 加 起 来 都 等 
于 12 列 的 宽度 ， 所 以 刚好 十 满 整 行 。 


图 4-16 一 个 12 列 网 格 系统 的 两 行 ， 每 行 的 子 元 素 的 宽度 可 能 等 于 1~12 个 列 的 宽度 


选取 12 作为 列 数 是 因为 它 能 够 被 2、3、4、6 整除 ,组 合 起 来 足够 灵活 。 比 如 可 以 很 容易 地 
实现 一 个 3 列 布局 (3 个 4 列 客 的 元 系 ) 或 者 一 个 4 列 布局 (4 个 3 列 宽 的 元 系 ) 还 可 以 实现 非 
对 称 的 布局 ， 比 如 一 个 9 列 宽 的 主 元 素 和 一 个 3 列 宽 的 侧 边栏 。 在 每 个 子 元 素 里 可 以 放置 任意 
标记 。 

下 面 代 码 里 的 标记 直观 地 展示 了 网 格 系统 。 每 行 有 一 个 行 容 融 div, 在 其 中 用 column-n 类 
为 每 个 列 元 素 放 置 一 个 div(n 是 网 格 里 的 列 数 )。 


<div class="row"> 
<div class="column-4">4 column</div> 
<div class="column-8">8 column</div> 
</div> 















































4.5.2 ”构建 网 格 系统 
用 网 格 系统 改造 一 下 前 面 的 网 页 。 虽 然 这 种 做 法 比 前 面 实现 布局 的 方式 烦 珊 , 但 是 因为 它 能 
提高 CSS 的 可 复 用 性 ， 所 以 还 是 值得 的 。 按 代码 清单 4-12 编辑 你 的 HTML。 


代码 清单 4-12 改造 HIML， 以 便 使 用 网 格 系统 


<main class="main clearfix"> 
<h2>RunNnning tips</h2> 








LY ELAS TOW > 
<div class="column-6"> 
<div class="media"> 
<img Class="media-image" src="runner.png"> 
<div class="media-body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 





especially your abs and glutes. 


把 每 两 
个 媒体 
对 象 用 
一 个 行 
元 素 包 
起 来 





< /PPD> 
</div> 
</div> 
</div> 


<div class="column-6"> 
<div class="media"> 
<img class="media-image" 
<div class="media-body"> 
<h4>Cadence</h4> 
<p> 


把 每 个 媒体 对 象 用 一 个 类 

名 为 column-6 的 元 素 包 

起 来 ， 这 样 每 个 媒体 对 象 
Stosseloes Dng'"> 都 位 于 单独 的 列 中 


Check your stride turnover. The most efficient 
runners take about 180 steps per minute. 


</pP> 
</div> 
0 开始 第 二 行 之 前 
0 先 闭合 第 一 行 


</div> 


yy "SQLY Class="rOWw'S 


<div class="column-6"> 
<div class="media"> 
<img class="media-image" 
<div class="media-body"> 
<h4>Change it up</h4> 
<p> 


src="shoes .png"> 


Don't run the same every time you hit the 


road. Vary your pace, 


of your runs. 
</pP> 
</div> 
</div> 
</div> 


<div class="column-6"> 
<div class="media"> 
<img class="media-image" 
<div class="media-body"> 
<h4>Focus on form</h4> 
<p> 


Run tall but relaxed. 


and vary the distance 


把 每 个 媒体 对 象 用 一 个 类 名 为 column-6 
的 元 素 包 起 来 ， 这 样 每 个 媒体 对 象 都 位 于 
单独 的 列 中 


src="runner.png"> 


Your feet should hit 


the ground beneath your hips, not out in 


front of you. 
</pP> 
</div> 
</div> 
</div> 
</div> 
</main> 








以 上 代码 清单 将 每 两 个 媒体 对 象 用 一 个 行 包 起 来 , 在 行内 把 每 个 媒体 对 象 都 单独 放 在 了 一 个 
6 列 冤 的 容 兹 中 。 





接 下 来 实现 网 格 布局 的 样式 。 自 和 完 定 义 行 元 系 的 样式 。 将 代码 清单 4-13 添加 到 你 的 样式 表 里 。 
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代码 清单 4-13 ”网 格 行 的 CSS 
.row: :after { 
SOmNEemt ~、 
display: block; 
clear: both; 
} 


以 上 代码 仅仅 实现 了 清除 浮动 。 这 样 写 是 为 了 避免 每 添加 一 个 行 元 系 就 要 给 它 加 一 个 
clearfix 类 。 稍 后 会 给 上 面 的 代码 补充 更 多 内 容 。 不 过 基本 上 行 元 系 的 作用 就 是 给 列 元 素 提 供 
一 个 容 般 ， 将 列 元 素 包 右 起 来 ， 而 清除 浮动 恰好 能 起 到 这 个 作用 。 

接 下 来 ， 给 列 元 素 添加 初始 样式 。 这 才 是 “重头 戏 "， 但 是 代码 并 不 复 傈 。 将 所 有 的 列 郡 译 
动 到 左边 ， 给 每 种 列 元 条 指定 宽 度 值 。 将 代码 清单 4-14 添加 到 样式 表 中 。 


代码 清单 4-14 ”网 格 列 的 CSS 
[class*="coljlumn-"] { 
float: left; 
} 


复制 清除 浮动 规则 ,让 行 
元 素 包 含 内 部 的 浮动 列 























这 个 选择 器 匹配 所 有 类 包含 
“column-” 的 元 素 

















.COlumn-1 { width: 8.3333%; } 

.COlumn-2 { width: 16.6667%; } ” 1 112 
.Column-3 { width: 25%; } | 2/12 
.Column-4 { width: 33.3333%$; } 

.COolumn-5 { width: 41.6667%; } | 
.CoOolumn-6 { width: 50%; } 

.COLumn-7 { width: 58.3333%; } 

.Column-8 { width: 66.6667%; } 

.Column-9 { width: 75%; } 

.COlumn-10 { width: 83.3333%; } 

.COlumn-11 { width: 91.6667% } 

.Column-12 { width: 100%; } 

















你 可 能 不 熟悉 第 一 个 选择 益 ， 它 是 一 个 属性 选择 器， 根据 元 系 的 class 属性 匹配 元 系 。 但 
是 跟 普通 的 类 选择 名 相 比 , 它 能 写 出 更 复杂 的 匹配 规则 。*= 比 较 符 可 以 匹配 任意 包含 指定 字符 串 
的 值 ， 比 如 本 例 中 可 以 匹配 在 类 属性 的 任意 位 置 出 现 column- 的 元 素 。 这 条 规则 既 能 匹配 <aiv 
class="column-2">, 也 能 匹配 <dqiv Classs "col =60 5 总 之 能 匹配 所 有 列 元 素 的 类 和 名。 
现在 不 管 每 列 客 度 是 多 少 ， 所 有 的 列 都 会 问 左 浮动 。 想 要 进一步 了 解 属性 选择 从 ， 参 见 附录 A。 


说 明 属性 选择 器 匹配 的 范围 比 预 期 的 更 广 。 比 如 除了 匹配 列 元 素 ， 上 面 的 属性 选择 
器 还 能 匹配 <div class="column-header"> 这 样 的 元 素 。 写 更 多 样式 时 ， 要 牢记 这 
一 点 。 最 好 的 方式 是 从 现在 起 将 类 名 里 的 “column” 作 为 保留 字 ， 这 样 就 不 会 跟 以 上 样 
式 规则 冲突 了 。 


给 所 有 的 列 加 上 float: left 后 ， 要 给 每 种 列 元 系 单 独 设 置 寓 度 。 可 能 需要 化 点 时 间 计算 


出 不 同 列 的 宽度 百分比 : 所 需 列 数 除 以 总 列 数 〈12 )。 要 精确 到 小 数 点 后 几 位 ， 以 免 因 为 四 舍 五 
入 而 导致 误差 。 
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现在 网 格 系统 已 经 初 具 积 形 。 你 的 页 面 现 在 看 起 来 应 该 如 图 4-17 所 示 。 看 起 来 并 不 是 理想 
的 效果 ， 因 为 媒体 对 象 重 复 实 现 了 网 格 系统 的 一 些 样式 。 


Running tips 


Strength 

Cadence 
Strength 
training is Check your 
an | 


。 stride 
important 


turnover. 

Pe The most 

efficient 
prevention. runners 
Focus on take about 
your core 180 steps 
一 er minute. 
especially 
your abs 
and glutes. 


图 4-17 使 用 了 网 格 系统 后 ， 就 不 需要 媒体 对 象 的 一 些 样式 了 


现在 简化 一 下 媒体 对 象 的 样式 。 去掉 左 浮动 , 因为 网 格 系统 已 经 包含 了 这 条 规则 。 去 掉 宽 度 ， 
这 样 它 才 能 填 满 容 需 100% 的 宽度 。 这 里 的 容 融 是 一 个 6 列 的 元 素 , 它 的 宽度 恰好 是 我 们 想 要 的 。 
去 掉 外 边 距 和 用 来 清除 浮动 的 nth-chilg 选择 器 。 网 页 现在 应 该 如 网 4-18 所 示 。 








Running tips 


Strength 

Cadence 
Strength training is an important part of injury < 
prevention. Focus on your core 一 especially your Check your stride turnover. The most efficient 
abs and glutes. runners take about 180 steps per minute. 


Vary your pace, and vary the distance of your runs. Run tall but relaxed. Your feet should hit the 
ground beneath your hips, not out in front of you. 


Change it up 
Focus on form 
Don't run the same every time you hit the road. 





图 4-18 删除 媒体 对 象 中 跟 定 位 相关 的 属性 ， 让 网 格 系统 给 媒体 对 象 定 位 和 设 定 宽度 
删除 多 余 样 式 后 ， 媒 体 对 象 的 样式 如 代码 清单 4-15 所 示 。 
代码 清单 4-15 删除 媒体 对 象 的 定位 和 宽度 声明 


.media { 


padding: 1.5enm; 删除 浮动 、 外 边 距 
background-color: #eee; 


各 帘 在 击 日 . | 
border-radius: 0.5em; 和 宽度 声明 删除 .media:nth-child(odd) 规 
} 则 集 和 clear: left 声明 
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.media-image { 
float: left; 
margin-right: 1.5em; 


} 


.media-body { 
overflow: auto; 
margin-top: 0; 


} 


.media-body h4 { 
margin-top: 0; 


} 


因为 删除 了 媒体 对 象 的 所 有 外 边 距 , 包括 底部 外 边 距 , 所 以 最 后 一 行 的 媒体 对 象 和 容 硕 底部 
之 间 的 间隔 丢失 了 。 给 容 硕 加 上 撒 部 内 边 跑 ， 以 恢复 间隔 《如 代码 清单 4-16 所 示 )。 


代码 清单 4-16 ”给 主 容 需 添加 底部 内 边 距 





.main { 
padding: 0 1.5em 1.5em; 
background- 0 并 在 下 下 > 增加 一 个 1.5em 的 底部 内 边 距 ， 
border-radius: . 让 它 等 于 左右 内 边 距 


} 
现在 已 经 离 最 终 的 设计 不 十 了 ， 不 过 还 有 几 处 细 市 需要 处 理 一 下 。 





4.5.3 添加 间 隅 


现在 网 格 系 统 还 缺少 每 列 之 则 的 间 阳 。 接 下 来 就 加 上 这 些 间 隔 ， 同时 补充 一 些 细 市 样式 。 完 
成 后 的 页 面 看 起 来 应 该 如 图 4-19 所 示 。 


Franklin Running Club 





Running tips 


Strength < Cadence 
Strength training is an important part of injury Check your stride turnover. The most efficient 


prevention. Focus on your core 一 especially your runners take about 180 steps per minute. 
abs and glutes. 


< Change it up Focus on form 
Don't run the same every time you hit the road. Run tall but relaxed. Your feet should hit the 


Vary your pace, and vary the distance of your ground beneath your hips, not out in front of you. 
runs. 


图 4-19 用 网 格 系统 实现 的 完整 页 面 
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给 每 个 网 格 列 添加 左右 内 边 距 ， 创 造 间 隔 。 把 间隔 交 给 网 格 系统 实现 ， 而 不 是 让 内 部 的 组 件 
(比如 媒体 对 象 ) 目 己 实现 ,这 样 就 能 够 在 其 他 页 面 复 用 这 套 网 格 系统 ,不 用 再 费心 去 实现 间隔。 

因为 需要 列 之 间 有 1.5em 的 间 隅 , 所 以 可 以 将 其 分 成 两 半 ,， 给 每 个 列 元 素 左 右 各 沃 加 一 半 的 
内 边 跑 。 按 照 代 码 清单 4-17 修改 网 格 的 样式 。 这 里 还 去 挥 了 所 有 列 元 系 的 项 部 外 边 距 ， 徐 蓄 猫 
头 订 选 择 融 里 的 样式 规则 。 


代码 清单 4-17 “给 网 格 系统 添加 间隔 


[class*="column-"| { 














floats LEE 给 每 个 列 元 素 的 左右 内 
padding: 0 0.75em; 边 距 各 赋值 0.75em 
margin-top: 0; 夫 掉 列 元 素 的 
顶部 外 边 距 











现在 网 格 系统 的 每 个 列 元 系 之 间 都 有 1.5em 的 间 隅 ， 看 起 来 棒 棒 的 。 但 是 ， 这 段 代 码 寻 致 了 
网 格 列 和 网 格 行 外 的 内 容 出 现 轻微 的 错位 。 如 图 4-20 所 示 ， 页 面 标题 (“Running tips”) 的 左边 
绿 本 来 应 该 跟 第 一 列 的 媒体 对 象 的 边 绿 对 齐 , 但 是 列 的 内 边 距 让 媒体 对 象 所 在 的 灰色 盒子 稍微 往 
右 移 『 了 一 操 。 








Running tips 


[EE 


Strength 

Strength training is an important part of injury 
prevention. Focus on your core— especially 
your abs and glutes. 


图 4-20 页面 标 题 的 左 侧 跟 列 元 素 〈 虚 线 区 域 ) 的 左 侧 对 齐 了 ， 但 没有 跟 列 里 面 的 内 容 对 章 


可 以 去 挥 每 行 第 一 列 的 左 侧 内 边 距 和 最 后 一 列 的 右 侧 内 边 距 来 解决 这 个 问题 ,但 这 逢 要 添加 
一 堆 样 式 规则 ， 其 实 只 需要 调整 行 的 宽度 即 可 。 

使 用 负 外 边 距 来 拉 伸 行 元 素 的 宽度 。 给 行 元 素 添 加 一 个 -0.7Sem 的 左 侧 外 边 距 ， 把 行 元 又 的 
左 侧 拉 伸 到 容 带 外 面 。 列 元 系 的 内 边 距 会 把 里 面 的 内 容 往 右 推 0.75em， 第 一 列 就 会 跟 页 面 标 古 
左 对 章 ( 如 图 4-21 所 示 )。 同 理 ， 还 要 给 行 元 系 深 加 负 的 右 侧 外 边 距 ， 拉 伸 右 侧 。 


























Running tips 


Strength 


Strength training is an important part of injury 
prevention. Focus on your core— especially your 
abs and glutes,. 





和 


图 4-21 给 行 元 系 添 加 负 的 外 边 距 ， 让 其 回 左 延伸 ， 抵 消 列 元 系 的 内 边 距 ， 这 样 列 
元 系 里 的 内 容 就 能 跟 网 页 的 标题 对 齐 了 
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具体 实现 如 代码 清单 4-18 所 示 。 现 在 不 管 将 行 元 素 放 在 哪里 ， 它 都 会 被 拉 伸 ， 比 它 所 在 的 
容 渭 锅 1.3em。 列 元 系 的 内 边 距 会 将 其 内 容 往 回 移动 ， 跟 行 元 素 外 面 的 容 融 边 绿 对 齐 。 这 种 方法 
也 是 双 容 带 模 式 的 一 个 不 错 的 修改 版 。 在 双 容 融 模 式 中 , 行 元 系 对 其 所 在 容 郁 而 言 就 是 内 层 容 从 。 


代码 清单 4-18 给 网 格 行 添 加 负 的 外 边 距 


























.IOW { 
margin-left: -0.75em; 
margin-right: -0.75em; 


: 


现在 你 已 经 借助 浮动 实现 了 一 个 完善 的 网 格 系统 。 不 管用 这 个 网 格 系统 还 是 CSS 框 染 里 的 
网 格 系统 ， 你 现在 都 应 该 理解 了 它 的 工作 原理 。 最 终 的 样式 表 如 代码 清单 4-19 所 示 。 


代码 清单 4-19 ”完整 的 样式 
:root { 
box-sizing: border-box; 


: 


x 7 
: :before, 
::after { 
box-sizing: inherit; 


. 


body { 
background-color: #eee; 
font-family: Helvetica, Arial, sans-serif; 


. 


body * + * { 
margin-top: 1.5em; 


} 


.TYOW { 
margin-left: -0.75em; 
margin-right: -0.75em; 


} 


.row: :after { 
ONEeES 
display: block; 
clear: both; 

} 


[class*="column-"] { 
float: left; 
padding: 0 0.75em; 
margin-top: 0; 


) 


.Column-1 { width: 8.3333%$; } 
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idth: 16.6667%; 
th: 25%; } 
th: 33.3333%; 
idth: 41.6667%; 
idth: 50%; } 
idth: 58.3333%; 
idth: 66.6667%; 
idth: 75%; } 


-1 
OO 0 





和 








.COluUumMnN-9 


.Column-10 { width: 83.3333%; 


.COlumn-11 { width: 91.6667% 
.Column-12 { width: 100%; } 

















header { 
padding: lem 1.5em; 
Color: #f£fff; 
background-color: #0072b0; 
border-radius: .Sem; 
margin-bottom: 1.5em; 


.main f{ 
padding: 0 1.5em 1.5em; 
background-color: #fff; 
border-radius: .5em; 


.Container { 
max-width: 1080px; 
margin: 0 auto; 


.media { 
padding: 1.5em; 
background-color: #eee; 
border-radius: 0.5em; 


.media-image { 
foats eft: 
margin-right: 1.5em; 


.media-body { 
overflow: auto; 
margin-top: 0; 


.media-body h4 { 
margin-top: 0; 


.Clearfix: :before, 
.Clearfix: :after { 
display: table; 


} 


J 


} 


CONLeEnt: 

} 

.Clearfix: :after { 
clear: both; 

} 


现在 完全 借助 浮动 实现 了 页 面 布局 ,虽然 浮动 有 些 怪异 的 行为 ,但 它 仍 然 能 实现 我 们 的 需求 。 
对 浮动 行为 有 了 更 深刻 的 理解 后 , 希望 你 不 会 再 对 浮动 犯 体 。 之 前 提 到 过 , 浮动 布局 有 更 好 理解 
的 世代 方案 ， 接 下 来 两 章 会 介绍 。 
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口 浮动 的 设计 初 囊 是 让 文子 围绕 一 个 元 系 排列 ， 但 有 时 这 种 效果 并 不 是 我 们 想 要 的 。 
DO 使 用 清除 浮动 来 包含 浮动 元 素 。 

口 BFC 有 3 个 好 处 : 包含 浮动 元 和 水， 防止 外 边 距 折 县 ,防止 文 档 流 围 绕 浮 动 元 素 排列 。 
口 使 用 双 容 带 模 式 让 页 面 内 容 居中。 

D 使 用 媒体 对 象 模式 将 措 述 文字 定位 到 网 片 劳 边 。 

口 使 用 网 格 系统 实现 更 丰富 的 网 页 布局 。 




















Flexbox 





本 划 概 要 

口 弹性 容 锅 和 弹性 元 对 
D 主轴 和 副 轴 

口 Flexbox 里 的 元 素 大 小 
口 Flexbox 里 的 元 素 对 齐 





如 果 你 在 过 去 的 几 年 里 一 直 在 接触 CSS， 那 么 肯定 听 过 有 人 对 Flexbox 大 加 赞赏 。Flexbox， 
全 称 弹 性 盒子 布局 ( Flexible Box Layout )， 是 一 种 新 的 布局 方式 。 跟 浮动 布局 相 比 ，Flexbox 的 
可 预测 性 更 好 , 还 能 提供 更 精细 的 控制 。 它 也 能 轻松 解决 困扰 我 们 许久 的 垂 生 居中 和 等 高 列 问 题 。 

Flexbox 已 经 问世 好 几 年 了 , 面向 高 级 浏览 融 编 程 的 开发 人 员 也 用 了 一 段 时 间 。 现 在 Flexbox 
已 经 得 到 主流 浏览 疮 的 文 持 , 在 了 正 10 中 也 得 到 了 部 分 文 持 。 实 际 上 , Flexbox 比 porgder-radius 
属性 的 文 持 范围 更 广 (Opera Mini 不 支持 porder-radius )。 现 在 正 是 学 习 它 的 好 时 机 ， 快 跟随 
本 章 认 识 Flexbox 吧 。 

要 说 Flexbox 有 缺点 的 话 ， 那 一 定 是 它 那 数 不 清 的 选项 了 。 它 给 CSS 引入 了 12 个 新 属性 ， 
包括 一 些 缩写 属性 。 一 次 掌握 所 有 的 属性 实在 吃不消 。 当 我 第 一 次 学 习 Flexbox 时 ， 有 点 像 拿 厦 
高 压 水 枪 喝 水 ， 东 西 太 多 了 ， 还 很 难 将 所 有 属性 记 住 。 这 次 我 要 用 另 一 种 方式 来 教 大 家 学 习 
Flexbox 由 浅 入 深 地 来 。 

本 章 将 先 介 绍 Flexbox 的 一 些 基 本 原则 ， 接 下 来 是 一 些 实践 案例 。 不 用 全 学 会 12 种 属性 也 
可 以 使 用 Flexbox， 其 实 只 要 几 种 属性 就 能 解决 绝 大 部 分 问题 ， 因 此 本 章 将 重点 介绍 这 些 属性 。 
和 镜 下 的 属性 用 于 控制 元 素 对 齐 和 间距 。 本 草 最 后 将 介绍 和 镜 下 的 属性 , 可 以 等 有 需要 的 时 候 再 翻阅 
本 章 最 后 的 内 容 。 


























5.1 Flexbox 的 原则 


一 切 要 从 我 们 熟悉 的 display 属性 开始 。 给 元 系 添 加 aisplay: flex， 该 元 系 变 成 了 一 
个 弹性 容器 〈flex container )， 它 的 直接 子 元 系 变 成 了 弹性 子 元 素 ( flex item )。 弹 性 子 元 对 默认 是 
在 同一 行 按 照 从 左 到 右 的 顺序 并 排 排列 。 弹 性 容 需 像 块 元 素 一 样 填 满 可 用 宽度 , 但 是 弹性 子 元 素 














S$.1 Flexbox 的 原则 101 


不 一 定 填 满 其 弹性 容 带 的 宽度 。 弹 性 子 元 素 高 度 相 等 ， 该 高 度 由 它们 的 内 容 决 定 。 


提示 还 可 以 用 display: :inline-flex。 它 创建 了 一 个 弹性 容器 ， 行 为 类 似 于 
inline-block 元 素 。 它 会 跟 其 他 行内 元 素 一 起 流 式 排列 ， 但 不 会 自动 增长 到 100% 的 
宽度 。 内 部 的 弹性 子 元 素 跟 使 用 display: flex 创建 的 Flexbox 里 的 弹性 子 元 素 行为 
一 样 。 在 实际 开发 时 ,很 少 用 到 display: inline-flex。 

之 前 提 到 的 gijsplay 值 ， 比 如 inline、inline-block 等 ， 只 会 影响 到 应 用 了 该 样式 的 


元 系 ， 而 Flexbox 则 不 一 样 。 一 个 弹性 容 需 能 欣 制 内 部 元 对 的 布局 。 弹 性 容 带 及 其 子 元 系 可 以 用 
图 5-1 表示 。 











弹性 子 元 此 
图 5-1 弹性 容 兹 及 其 子 元 素 

子 元 素 按 照 主 轴线 排列 ， 主 轴 的 方向 为 主 起 点 ( 左 ) 到 主 终点 ( 右 )。 垂 直 于 主轴 的 是 副 轴 。 
方向 从 副 起 点 (上 ) 到 副 终点 (下 )。 这 些 轴 的 方向 可 以 改变 ， 本 章 稍 后 会 介绍 。 

说 明 因为 Flexbox 布局 是 以 主轴 和 副 轴 为 基础 来 定义 的 ， 所 以 我 会 使 用 起 点 和 终点 来 

描述 轴 ， 而 不 是 左 和 右 ， 或 者 上 和 下 。 

这 些 概 念 ( 弹性 容器 、 弹 性 子 元 素 、 两 条 轴 ) 覆盖 了 Flexbox 的 大 部 分 信息 。 在 12 种 新 属 
性 发 挥 作用 之 前 ， 仅 仅 使 用 aisplay: flex 就 完成 了 很 多 工作 。 为 了 验证 Flexbox 的 威力 ， 接 
下 来 将 构建 如 图 5-2 所 示 的 网 页 。 





Team collaboration done right 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 


STARTING AT 


$00™ 





图 5-2 使 用 Flexbox 布局 实现 的 网 页 





图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 
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我 将 通过 这 个 网 页 的 结构 来 介绍 Flexbox 的 几 种 用 法 。 顶 部 的 导航 菜单 、 三 个 白色 盒子 以 及 
右 下 “$20.00” 的 样式 都 将 用 Flexbox 实现 。 
创建 一 个 新 网 页 ， 给 它 链接 一 个 新 的 样式 表 。 将 代码 清单 5-1 中 的 标记 添加 到 网 页 。 


代码 清单 5-1 网 页 的 标记 
<!ldoctype html> 
<head> 





<title>Flexbox example page</title> 
<link href="styles.css" rel="stylesheet" 
type="text/css" /> 
</head> 
<body> 
<div class="container"> 
<header> 
<hi>Ink</hi> 
</header> 
<nav> 
<ul class="site-nav"> 








<1i><a href="/">Home</a></11i> 
<1i><a href="/features">Features</a></11i> 
<1i><a href="/pricing">Pricing</a></11i> 
<1i><a href="/support">Support</a></11i> 导航 菜单 
<1i class="nav-right"> 
<a href="/about">About</a> 
</11i> 
</ul> 
</nav> 


<main class="flex"> 
<div class="column-main tile"> 
<hi>Team collaboration done right</hi> 
<p>Thousands of teams from all over the 


world turn to <b>Ink</b> to communicate 大 的 主体 板块 
and get things done.</p> 
</div> 
<div class="column-sidebar"> 
xiv cl ase tile'n 侧 边 栏 包 含 两 个 上 下 
<form class="]l]ogin-form"> 芸 放 的 小 板块 
<h3>Login</h3> 
<p> 


<label for="username">Username</l1label> 
<input id="username" type="text" 
name="username"/> 
</p> 
<p> 
<label for="password">Password</1label> 
<input id="password" type="password" 
name="pPassword"/> 
</D> 
<button type="submit">Login</button> 
</form> 
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</div> 
<div class="tile centered"> 





<small>Starting at</small> 
<div class="cost"> 
<span class="cost-currency">S$</span> 
<span class="cost-dollars">20</span> 
<span class="cost-cents">.00</span> 
</div> 
<a Class="cta-button" href="/pricing"> 
Sign up 
</a> 
</div> 
</div> 
</main> 
</div> 
</body> 


接着 是 样式 表 ， 将 代码 清单 5-2 加 入 到 新 建 样 式 表 。( 相信 你 现在 已 经 涩 悉 以 下 样式 了 。 ) 
代码 清单 5-2 网 页 的 基础 样式 


:root { 





box-sizing: border-box; 
} 
x 全 局 box-sizing 设置 
: :before, (参见 第 3 章 ) 
::after { 

box-sizing: inherit; 


} 


body { 
background-color: #709b90; 给 网 页 设置 绿色 的 背景 
font-family: Helvetica, Arial, sans-serif; 和 sans-serif 的 字体 


} 


body * + * { 


margin-top: 1.5em; 全 局 外 边 距 (参见 
第 3 章 ) 
.Container { 

max-width: 1080px; 双 容 器 ， 用 于 网 页 内 容 

margin: 0 auto» 居中 (参见 第 4 章 ) 


} 
现在 网 页 已 经 初 具 委 形 ， 接 下 来 用 Flexbox 布局 。 先 从 顶部 的 导航 菜单 入手 。 





5.1.1 创建 一 个 基础 的 Flexbox 菜 单 


本 例 要 实现 如 图 5-3 所 示 的 导航 菜单 。 菜 单 里 的 大 部 分 菜单 项 都 居 左 对 齐 ， 只 有 一 项 居 右 
对 齐 。 
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Features Pricing Support 





图 $-3 ”导航 亲 单 ， 菜 单项 用 Flexbox 布局 


要 实现 这 个 菜单 ,需要 考虑 让 哪个 元 素 做 弹性 容 货 ,这 个 元 素 的 子 元 素 便 会 成 为 弹性 子 元 素 。 
在 本 例 中 , 弹性 容 融 应 该 是 无 序列 表 ( <ul> ), 它 的 子 元 素 ， 即 列表 项 ( <1i> ) 就 是 弹性 子 元 素 。 
代码 如 下 所 示 。 


<ul class="site-nav"> 














<1i><a href="/">Home</a></11i> 

<l1i><a href="/features">Features</a></11i> 

<l1i><a href="/pricing">Pricing</a></1i> 

<l1i><a href="/support">Support</a></1i> 

<l1i class="nav-right"><a href="/about">About</a></11i> 
</ul> 











接 下 来 分 几 步 构建 这 个 菜单 。 首 先 ， 给 列表 加 上 dislay: flex。 然 后 覆盖 浏览 硕 黑 认 的 列 
表 样 式 和 猫 尖 谭 选择 带 设 置 的 项 部 外 边 距 。 同 时 添加 颜色 。 效 果 如 图 5-4 所 示 。 


HomeFeaturesPricingSupportAbout 





图 5-4 设置 了 颜色 和 Flexbox 属性 后 的 菜单 


在 HTML 标记 里 , 已 经 给 <ul> 指 定 了 类 site-nav， 可 以 在 样式 表 中 用 该 类 作为 选择 带 。 
添加 代码 清单 5-3 到 你 的 样式 表 中 。 


代码 清单 5-3 ”将 亲 单 设置 为 Flexbox 并 添加 颜色 
z 关 指定 site-nav 为 弹性 容器 ， 
.Site-nav { 


i 让 子 元 素 成 为 弹性 子 元 素 


padding-left: 0 
ee 去 掉 浏览 器 默认 的 左 侧 内 边 距 
background-color: #5f4b44; 以 及 列表 的 项 目 符号 
} 
.Site-nav > 11 { 
margin-top: 0; 
和 覆盖 猎头 应 选择 器 的 
顶部 外 边 距 


.Site-nav > 11 >a { 
background-color: #cc6b5Da; 


Color: white; 0 . 
-| 履 兰 浏览 器 默认 的 链 


text-decoration: none; Sa A 
i 接 文字 的 下 划 线 样式 


注意 , 现在 处 理 的 是 三 个 层级 的 元 素 : site-nav 列表 (弹性 容器 ) 列表 项 ( 弹性 子 元 素 )、 
内 部 的 销 点 标签 ( 链接 )。 直接 后 代 组 合 般 (> ) 确保 了 只 会 选中 和 直接 子 元 素 。 虽然 不 是 特别 有 必 
要 ,， 毕 苋 之 后 也 不 太 可 能 会 给 导航 末 单 深 加 般 套 的 列表 , 但 是 保险 起 见 , 还 是 加 上 。 想 要 更 多 了 
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解 这 个 组 合 锅 ， 参 见 附 录 A。 
浏览 器 前 组 
如 果 在 旧版 浏览 器 中 使 用 Flexbox， 比 如 下 10 或 者 Safari8, 你 会 发 现 这 个 写法 不 管用 , 这 
是 因为 旧版 浏览 器 要 求 给 Flexbox 属性 加 上 浏览 器 前 缀 。 在 标准 稳定 前 ,浏览 器 一 般 是 这 样 来 
支持 CSS 新 特性 的 。 比如, 旧版 Safari 浏览 器 没 实 现 display: flex, 而 是 实现 了 display: 
-webkit-flex。 要 在 Safari8 中 支持 Flexbox， 就 得 在 标准 写法 前 面 加 上 前 级 。 


.Site-nav { 
display: -webkit-flex; 
display: flex; 

} 


因为 浏览 器 会 忽略 不 认识 的 声明 ， 所 以 在 Safari8 中 ， 层 登 值 应 该 写成 -webkit-flex， 
人 
flex 属性 (本章 稍 后 会 介绍 该 属性 )。 


“welBkit flex: 1]. 
flex: 1; 


在 IE10， 情况 更 复杂 。 浏 览 器 实现 了 一 个 更 早 版 本 的 Flexbox 标准 。 为 了 支持 这 个 版 本 ， 
需要 了 解 一 点 更 早 版 本 的 属性 名 ( 比如 ，flexbox 而 不 是 flex )， 然 后 给 这 些 属 性 加 上 前 级 。 


display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 


这 样 就 需要 记录 更 多 内 容 ， 样 式 的 重复 代码 会 变 多 。 强 烈 推 荐 使 用 Autoprefixer 来 自动 化 
这 一 流程 ， 可 以 通过 GitHub 网 站 下 载 该 工具 。 它 可 以 处 理 CSS， 然 后 输出 新 的 文件 ， 所 有 相 
关 的 前 级 都 会 按 需 加 好 。 如 果 需 要 的 话 ， Rs 还 能 给 [E10 加 上 旧版 的 Flexbox 写法 。 
因为 Autoprefixer 可 以 跟 众 多 构建 工具 一 起 使 用 ， 所 以 可 以 把 它 加 入 到 自己 日 常 的 工作 流 。 

简 音 起见， 本草 的 例子 上 省 略 了 前 级 。 在 所 有 现代 浏览 器 里 这 些 例子 都 没 问 题 , 但 是 在 生产 
环境 中 ， 务 必用 Autoprefixer 处 理 一 下 代码 ， 这 样 才 能 在 更 多 浏览 器 里 生效 。 

还 有 ， 前 级 的 方式 正在 逐渐 被 弃 用 。 所 有 的 主流 浏览 器 已 经 转向 (或 者 正在 转向 ) 使 用 新 
的 方式 来 支持 新 的 不 稳定 的 功能 ， 在 “实验 功能 ”( experimental features ) 选项 中 即 可 开启 。 
第 6 章 会 讨论 这 一 话题 


S42 洒 加 内 边 力 中 和 间隔 


现在 菜单 看 起 来 比较 “单薄 ”"， 加 上 内 边 距 能 让 它 变 “饱满 ”一 些 。 给 容器 和 菜单 链接 都 加 
上 内 边 距 后 ， 且 单 如 图 5-5 所 示 。 
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图 5-5 添加 了 内 边 中 和 链接 样式 后 的 沫 单 


如 果 你 还 不 太 熟 悉 构 建 这 样 的 菜单 (不 管用 Flexbox 还 是 其 他 布局 方式 )， 那 么 请 注意 一 下 
如 何 实现 。 在 这 个 例子 里 , 应当 把 六 单项 内 边 距 加 到 内 部 的 <a> 元 系 上 ， 而 不 是 <1i> 元 系 上 。 
为 整个 点 击 区 域 的 外 观 和 行为 应 当 都 从 合用 户 对 一 个 亲 单 链接 的 预期 ， 而 链接 的 行为 来 自 于 <a> 
元 于， 所 以 如 果 把 <1i> 做 成 一 个 好 看 的 大 按钮 ， 里面 只 有 很 小 的 区 域 (<a> ) 可 以 点 击 ， 束 不 符 
合用 户 预 期 。 

如 代码 清单 5-4 所 示 ， 更 新 样式 表 ， 给 末 单 填充 内 边 距 。 


代码 清单 5-4 ”给 沫 单 和 链接 次 加 内 边 距 
.Site-nav 1{ 
display: flex; 
en 给 链接 外 的 菜单 容 
background-color: #5f4b44; 器 添加 内 边 距 
list-style-type: none; Sn 
border-radius: .2em; 


lL 


.Site-nav > 11 { 
margin-top: 0; 
} 
让 链接 成 为 块 级 元 素 ， 这 样 
.Site-nav > 1i1 > aa { 就 能 撑 开 父 元 素 的 高 度 
display: block; 
padding: .5em lem; 
background-color: #cc6b5Da; | 给 链接 添加 内 边 距 


Color: white; 
text-decoration: none; 


上 

注意 这 里 的 链接 被 设置 为 块 级 元 素 。 如 果 链 接 还 是 行内 元 素 , 那么 它 给 父 元 素 贡 献 的 高 度 会 
根据 行 高 计算 ， 而 不 是 根据 内 边 距 和 内 容 ,这样 不 符合 预期 。 另 外 , 这 里 给 水 平方 向 设置 的 内 边 
距 比 垂直 方 回 的 要 多 一 点 ， 因 为 从 美学 上 来 讲 这 样 更 让 人 愉悦 。 

接 下 来 ， 给 菜单 项 添加 间隔 。 常 规 的 外 边 距 就 能 做 到 这 一 点 。 更 棱 的 是 ，Flexbox 允许 使 用 
margin: auto 来 填充 弹性 子 元 素 之 间 的 可 用 空间 。Flexbox 还 允许 将 最 后 的 菜单 项 移动 到 右 侧 。 
加 上 外 边 距 后 ,菜单 就 完成 了 ( 如 图 5-6 所 示 )。 
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图 5-6 “外边 距 给 弹性 子 元 系 加 上 了 间隔 


代码 清单 5-5 的 样式 给 每 个 弹性 子 元 素 之 间 加 上 了 外 边 距 ， 最 外 侧 的 两 个 元 素 除 外 。 为 了 实 
现 这 一 效果 ， 可 以 采用 margin-left 属性 和 一 个 相 邻 兄 第 组 合 右 ， 这 个 方法 跟 第 3 章 的 猫头鹰 
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选择 各 类 似 。 同 时 给 最 后 的 按钮 加 上 一 个 auto 的 左 侧 外 边 距 ， 这样 就 会 让 这 个 外 边 距 填充 所 有 
可 用 空间 ， 如 此 一 来 ， 最 后 的 按钮 就 会 被 推 到 最 右 侧 。 深 加 代码 清单 5-5 到 你 的 样式 表 。 


代码 清单 5-5 ”使 用 外 边 距 给 弹性 子 元 素 加 上 间隔 


.Site-nav > 1i + 11 { 
margin-left: 1.5em; 选中 所 有 前 面 有 列表 项 的 列表 项 (也 就 是 
} 说 除了 第 一 项 之 外 的 所 有 列表 项 ) 


LO 1 . 
margin-Lefts autoy 弹性 盒子 内 的 auto 外 边 距 会 填 
| 充 所 有 可 用 空间 
代码 清单 5-5 只 给 一 个 元 素 ( About ) 加 了 auto 外 边 距 。 如 果 和 希望 将 Support 菜单 项 和 About 
菜单 项 都 推 到 右 侧 ， 则 可 以 把 auto 外 边 距 加 到 Support 菜单 项 上 。 
外 边 中 非常 适合 现在 的 场景 , 因为 我 们 需要 末 单 项 之 间 的 间距 不 同 。 如果 和 希望 菜单 项 等 间距 ， 
那么 justify-content 属性 会 是 更 好 的 方式 。 稍 后 会 介绍 这 个 属性 。 
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前 面 的 代码 使 用 外 边 距 给 弹性 子 元 素 设 置 了 间距 。 你 可 以 用 wiatn 和 height 属性 设置 它 
们 大 小 , 但 是 比 起 margin、width、heignht 这 些 常 见 属性 ，Flexbox 提供 了 更 多 更 强大 的 选项 。 
我 们 来 看 一 个 更 有 用 的 Flexbox 属性 : flex。 

flex 属性 控制 弹性 子 元 素 在 主轴 方 回 上 的 大 小 〈 在 这 里 指 的 元 素 的 宽度 )。 代 码 清单 5-6 将 
给 网 页 的 主 区 域 应 用 弹性 布局 , 并 使 用 flex 属性 控制 每 一 列 的 大 小 。 产生 的 主 区 域 效 果 如 图 5-7 
所 示 。 
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Team collaboration done right Login 


Thousands of teams from all over the world turn to Ink to communicate and get things done. Username 
Password 


Login 


Starting at 


$ 20 .00 
ign 





图 5-7 应 用 了 弹性 布局 的 主 区 域 
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将 代码 清单 5-6 的 样式 添加 到 样式 表 中 。 代 码 清单 5-6 通 过 tile 类 给 三 个 板块 加 了 白色 篆 
景 ， 同 时 ， 通 过 flex 类 给 <main> 元 又 加 了 弹性 布局 。 


代码 清单 5-6 ”将 主 容 套 设 置 为 Flexbox 


.tile { 
badding: 1.5emy; 给 三 个 板块 加 上 白色 
background-color: #fff; 背景 和 内 边 距 
| 
.flex { 
A 已 PR 口 旦 \ 几 L S 到 
display: flex; 将 主 容器 设置 
} 为 Flexbox 


-flex > * + 4 
We 去 掉 顶 部 外 边 距 ， 给 每 个 弹 


margin-left: 1.5em; 性 子 元 素 之 间 加 上 间隔 


现在 内 容 已 经 分 为 了 两 列 : 左 侧 较 大 的 区 域 是 网 页 的 主要 内 容 , 右 侧 是 登录 表单 和 一 个 小 的 
价格 盒子 。 因 为 目前 还 没有 特别 设置 两 列 的 宽度 ， 所 以 是 根据 内 容 目 适应 的 宽度 。 在 我 的 屏幕 上 
( 如 图 5-7 所 示 )， 它 们 没有 完全 填 满 可 用 空间 ， 尽 管 在 更 小 的 窗口 下 可 能 不 会 出 现 这 种 状况 。 

说 明 在 CSS 里， 不仅 要 考虑 当前 网 页 的 内 容 ， 还 要 考虑 内 容 变 化 后 的 情况 ， 或 者 是 


相同 的 样式 表 作 用 到 相似 网 页 上 的 情况 。 要 考虑 清楚 在 不 同情 况 下 ， 页 面 元 素 ( 比如 这 
两 列 ) 的 表现 是 什么 样 的 。 





























弹性 子 元 率 的 flex 属性 其 实 包 含 了 好 几 个 选项 。 我 们 先 通 过 最 基础 的 用 例 熟 悉 一 下 这 个 属 
性 。 这 里 用 column-main 和 column-sidebar 类 来 指定 两 列 , 使 用 flex 属性 给 两 列 分 别 赋 以 
2/3 和 1/3 的 宽度 。 将 代码 清单 5-7 添加 到 样式 表 中 。 


代码 清单 5-7 使 用 flex 属性 设置 列 宽 
.Column-main { 
flex: 2; 
} 








.Column-sidebar { 
flex: 1; 

} 

现在 两 列 扩 展 宽 度 填 满 空 间 ,， 它们 的 宽度 加 起 来 等 于 nav 导航 条 的 宽度 ， 同 时 左 侧 主 区 域 的 
宽度 是 侧 边 栏 宽度 的 两 倍 。Flexbox 已 贴心 地 完成 了 所 有 数学 计算 。 来 看 一 下 它 的 具体 计算 过 程 。 

F111 属性 是 三 个 不 同 大 小 属性 的 简写 : flex-grow、 flex-shrink Flex= basis, 在 代 
但 清单 5-7 里 ， 只 提供 了 flex-grow 的 值 ， 剩 下 的 两 个 属性 是 默认 值 (分 别 是 1 和 0% )， 因 此 
flex: 2 等 价 于 flex: 2 1 0%。 通 常 首 选 简 写 属性 ， 但 也 可 以 分 别 声 明 三 个 属性 。 
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flex-grow: 2; 
flex-shrink: 1; 
flex-basis: 0%; 


接 下 来 看 看 三 个 属性 分 别 表示 什么 。 先 从 flex-basis 开始 ， 因 为 其 余 两 个 属性 都 基于 


flex-basiso 





5.2.1 使 用 flex-basis 属 性 


flex-basis 定义 了 元 率 大 小 的 基准 值 ， 即 一 个 初始 的 “ 主 尺 寸 "。flex-basis 属性 可 以 设 
置 为 任意 的 width 值 , 包括 px、em、 百 分 比 。 它 的 初始 值 是 auto， 此 时 浏览 亏 会 检查 元 素 是 否 
设置 了 wiath 属性 值 。 如 果 有 ， 则 使 用 wiatnh 的 值 作为 Elex-basis 的 值 ; 如 果 没 有 ， 则 用 元 
系 内 容 目 身 的 大 小 。 如 条 flex-basis 的 值 不 是 auto，wiatn 属性 会 被 忽略 。 如 图 5-8 所 示 。 


DE | 

a | 

flex-basis: 20% || flex-basis: 20% flex-basis: 20% | 剩余 宽度 : 40% | 
| 

ES | 


图 5-8 ”三 个 弹性 子 元 素 的 弹性 基准 是 20%， 每 一 个 元 素 初 始 主 尺寸 (宽度 ) 为 20% 


每 个 弹性 子 元 系 的 初 妈 主 尺寸 确定 后 , 它们 可 能 需要 在 主轴 方向 扩大 或 者 缩小 来 适应 (或 者 
填充 ) 弹性 容 疾 的 大 小 。 这 时 候 就 需要 flex-grow 和 flex-shrink 来 次 定 缩放 的 规则 。 














5.2.2 使 用 flex-grow 属 性 


每 个 弹性 子 元 素 的 flex-basis 值 计 算出 来 后 ,它们 ( 加 上 子 元 系 之 间 的 外 边 距 ) 加 起 来 会 
占据 一 定 的 宽度 。 加 起 来 的 宽度 不 一 定 正 好 填 满 弹性 容 货 的 宽度 , 可 能 会 有 留 日 (如 图 5-8 所 示 )。 

多 出 来 的 留 白 (或 剩余 宽度 ) 会 按照 flex-grow (增长 因子 ) 的 值 分 配给 每 个 弹性 子 元 素 ， 
flex-grow 的 值 为 非 负 整数 。 如 果 一 个 弹性 子 元 素 的 ftlex-grow 值 为 0， 那 么 它 的 宽度 不 会 超 
过 flex-basis 的 值 ; 如 果 某 个 弹性 子 元 素 的 增长 因子 非 0, 那么 这 些 元 素 会 增长 到 所 有 的 剩余 
空间 被 分 配 完 ， 也 就 意味 着 弹性 子 元 系 会 填 满 容 带 的 冤 度 ( 如 图 5-9 所 示 )。 




















flex-basis: 20% 
flex-grow: 0 





图 5-9 拥有 相同 的 flex-grow 值 的 子 元 素 会 分 配 相 同比 例 的 剩余 宽度 


flex-gzow 的 值 越 大 , 元 素 的 “权重 ” 越 高 , 也 就 会 占据 更 大 的 剩余 宽度 。 一 个 flex-grow: 
2 的 子 元 素 增 长 的 宽度 为 flex-grow: 1 的 子 元 素 的 两 倍 ( 如 图 5-10 所 示 )。 
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图 5-10 ”flex-grow 值 越 大 ， 子 元 素 能 分 配 剩 余 可 用 宽度 的 比例 越 大 


还 记得 前 面 的 三 个 板块 吗 ? 简写 声明 flex: 2 和 flex: 1 设置 了 一 个 弹性 基准 值 为 0%, 
因此 容 需 宽度 的 100% 都 是 剩余 宽度 〈 减 去 两 列 之 间 1.5em 的 外 边 距 )。 剩 余 宽 度 会 分 配给 两 列 : 


第 一 列 得 到 2/3 的 宽度 ， 第 二 列 得 到 1/3 的 宽度 (如 图 5-11 所 示 )。 
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Team collaboration done right bogin 


Thousands of teams from all over the world turn to Ink to communicate and get 
things done. 


Username 
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Login 





图 5-11 这 两 列 填充 了 弹性 容 需 的 宽度 


提示 推荐 使 用 简写 属性 flex， 而 不 是 分 别 声 明 flex-grow、flex-shrink、 

flex-basis。 与 大 部 分 简写 属性 不 一 样 ， 如 果 在 flex 中 忽略 某 个 子 属 性 ， 那 么 子 必 
性 的 值 并 不 会 被 置 为 初始 值 。 相 反 ， 如 果 某 个 子 属 性 被 省 略 ， 那 么 flex 简写 属性 会 给 
出 有 用 的 默认 值 : flex-grow 为 ]、flex-shrink 为 1、flex-basis 为 0%。 这 些 默 


认 值 正 是 大 多 数 情 况 下 所 需要 的 值 。 


5.2.3 使 用 flex-shrink 属 性 


flex-shrink 属性 与 flex-grow 膛 循 相似 的 原则 。 计 算出 弹性 子 元 素 的 初始 主 尺 十 后, 它 
们 的 累加 值 可 能 会 超出 弹性 容 硬 的 可 用 宽度 。 如果 不 用 flex-shrink, 就 会 导致 洪 出 ( 如 图 5-12 


所 示 )。 
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| | 
| 
| | 
| 
flex-basis: 40% flex-basis: 40% flex-basis: 40% | | 
| | 
| 
| 


| 
图 5-12 ”弹性 子 元 素 的 初始 大 小 可 能 超出 弹性 容 体 


每 个 子 元 系 的 flex-shrink 值 代 表 了 它 是 否 应 该 收缩 以 防止 洪 出 。 如 果 某 个 子 元 素 为 
flex-shrink: 0， 则 不 会 收缩 ; 如 果 值 大 于 0， 则 会 收缩 至 不 再 洪 出 。 按 照 flex-shrink 但 
的 比例 ， 值 越 大 的 元 素 收缩 得 越 多 。 

用 flex-shrink 也 能 实现 上 述 页 面 中 两 列 的 宽度 。 首 先 将 两 列 的 flex-basis 指定 为 理想 
的 比例 (66.67% 和 33.33% )。 它 们 的 宽度 之 和 加 上 1.5em 的 间隔 就 会 比 容 需 宽度 多 出 1.5em。 然 
后 将 两 列 的 flex-shrink 设置 为 1， 这样 就 会 从 每 列 的 宽度 减 掉 0.7$Sem， 于 是 容 需 就 能 容纳 两 
列 了 。 代 码 如 代码 清单 5-8 所 示 。 


代码 清单 5-8 使 用 flex 属性 设置 宽度 
.column-main ({ 


flex: 66.67g; 
} 等 价 于 flex: 1 1 66.67% 














.Column-sidebar { 
flex: 33.33%3; 
} 等 价 于 flex: 1 1 33.33% 


这 种 解决 方案 跟前 面 ( 代码 清单 5-7 ) 得 到 的 结 采 一 样 ， 两 者 都 能 满足 该 页 面 的 需求 。 








说 明 ”如 果 看 一 下 这 两 种 方式 的 细节 ， 就 会 发 现代 码 清单 5-7 和 代码 清单 5-8 之 间 有 细微 
的 差别 。 原 因 很 复杂 , 但 简单 来 讲 , 是 因为 column-main 有 内 边 距 , 而 column-sidebar 
没有 。 当 flex-basis 为 0% 时 ， 内 边 距 会 改变 弹性 子 元 素 的 初始 主 宽 度 计 算 的 方式 。 
因此 代码 清单 5-7 的 column-main 比 代 码 清 单 5-8 的 要 宽 3em， 即 左右 内 边 距 的 大 小 。 
如 果 想 要 精确 的 结果 ， 那 么 要 么 保证 两 列 有 相同 的 内 边 距 ， 要么 用 代码 清单 5-8 的 方式 
设置 弹性 基准 值 。 


5.2.4 ”实际 应 用 

flex 属性 有 很 多 用 法 。 可 以 像 前 面 的 网 页 那样 ， 用 flex-grow 值 或 者 flex-pbasis 百 分 
比 定 义 每 列 的 比例 。 也 可 以 用 于 定义 固定 宽度 的 列 和 随 春 视 口 缩放 的 "流动 " 列 。 还 可 以 用 Flexbox 
而 不 是 浮动 构建 第 4 章 那 样 的 网 格 系统 。 图 5-13 展示 了 可 以 用 Flexbox 实现 的 几 种 布局 。 
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第 一 个 子 元 素 固 定 宽度 为 300px。 
可 以 给 它 加 一 个 max-width 防 止 
内 容 撑 开 宽 度 。 第 二 个 子 元 素 填 
满 剩 余 空 间 


图 5-13 ”用 弹性 盒子 定义 元 了 大 小 的 几 种 方式 


其 中 第 3 个 例子 展示 的 是 “圣杯 ”布局 。 众 所 周知 ， 用 CSS 实现 这 种 布局 非 第 困难 。 该 布 
局 中 ， 两 个 侧 边栏 宽度 固定 ， 而 中 间 的 列 是 “流动 的 "， 即 它 会 日 动 填 充 可 用 空间 。 重 点 是 ， 三 
列 的 高 度 相等 ， 该 高 度 取 决 于 它们 的 内 容 。 尽 管 浮动 也 能 实现 这 种 布局 ,但 再 要 用 一 些 既 临 泌 叉 
脆弱 的 技巧 。 你 可 以 使 用 不 同 的 弹性 子 元 系 ， 想 出 很 多 不 同 的 方式 来 组 合 以 上 的 布局 。 


5.3 ”弹性 方向 


Flexbox 的 另 一 个 重要 功能 是 能 够 切换 主 副 轴 方 向 ,用 弹性 容 硕 的 flex-direction 属性 
控制 。 如 前 面 的 例子 所 示 ， 它 的 初始 值 ( row ) 控制 子 元 素 按 从 左 到 右 的 方向 排列 ; 
flex-direction: column 能 控制 弹性 子 元 素 沿 垂直 方向 排列 〈 从 上 到 下 )。Flexbox 还 支 
持 row-reverse 让 元 素 从 右 到 左 排列 ，column-reverse 让 元 素 从 下 到 上 排列 〈 如 图 5-14 
所 示 )。 








子 元 素 随 目 身 宽度 扩展 ， 
不 一 定 填 满 容器 宽度 又 























圣杯 ”布局 。 第 一 个 和 第 三 个 
子 元 素 固定 宽度 为 200px。 中 间 
的 元 素 自动 扩展 填 满 剩余 空间 











子 元 素 扩展 到 指定 的 百分比 宽度 ， 可 
以 用 来 构建 第 4 章 那 样 的 网 络 系统 























flex-direction:row 





flex-direction:row-reverse 


flex-direct1ion.: 
column 
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flex-direction.: 
column-reverse 


图 5-14 ”改变 弹性 方向 就 改变 了 主轴 方向 ， 副 轴 因 为 要 与 主轴 垂直 ， 所 以 方向 也 随 之 改变 
在 本 章 的 示例 网 页 里 ， 右 侧 的 列 将 用 到 flex-direction 属性 让 右 侧 的 两 个 板块 按 从 上 到 
下 的 顺序 排列 。 这 样 做 似乎 多 此 一 举 ， 毕 竞 右 侧 的 两 个 板块 已 经 是 这 样 的 顺序 了 。 普 通 的 块 级 元 
素 本 来 就 会 这 样 排列 ， 但 是 这 种 布局 有 一 个 隐藏 的 缺陷 ， 给 主板 块 添加 更 多 内 容 就 能 看 到 问题 ， 


如 图 5-15 所 示 。 


给 column-main 添加 一 些 标 题 和 段落 ， 就 会 发 现 主 板块 超出 了 右边 板块 的 底部 。Flexbox 


应 该 能 让 两 列 的 高 度 相 等 ， 为 什么 不 起 作用 了 呢 ? 


Team collaboration done right 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 


Communication around the globe 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 


Instant access to your team's documents 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 


Intuitive interface 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 





Login 
Username 


Password 


Login 


Starting at 


$ 20 .00 
Sign up 


图 5-15 ”主板 块 的 高 度 超 过 了 右 侧 两 个 板块 的 高 度 ( 虚线 标 出 了 column-sidebar 的 大 小 ) 
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如 图 5-15 (虚线 区 域 ) 所 示 ， 其实 左 右 两 个 弹性 子 元 条 是 等 高 的 。 问题 是 右边 位 内 部 的 两 个 
板块 没有 扩展 到 十 满 右边 栏 区 域 。 

理想 的 布局 应 该 如 图 5-16 所 示 。 右 侧 两 个 板块 会 扩展 高 度 填 满 右 边栏 ， 尽 管 左边 的 内 容 更 
长 。 在 Flexbox 之 前 ， 纯 CSS 是 无 法 实现 的 (需要 稍微 借助 JavaScript )。 





Team collaboration done right Login 


Thousands of teams from all over the world turn to Ink to communicate and get things done. Username 


Password 


Communication around the globe 


Login 
Thousands of teams from all over the world turn to Ink to communicate and get things done. 


Instant access to your team's documents 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 
Starting at 


三 品 $ 20 .00 
Intuitive interface Sign up 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 





图 $-16 ”理想 的 布局 : 右边 栏 的 板块 跟 左边 的 大 板块 对 齐 


5.3.1 改变 弹性 方向 


上 述 场景 的 真正 需求 是 计 两 列 扩 展 到 填 满 容 需 的 高 度 。 因 此 要 将 右边 栏 (column-siaebaz ) 
改 为 弹性 容器 ， 并 设置 flex-direction: column。 然 后 给 里 面 的 两 个 板块 设置 非 0 的 
flex-grow 值 。 按 代 码 清 单 5-9 所 示 ， 更 新 你 的 样式 表 。 


代码 清单 5-9 在 右 侧 创建 一 个 弹性 列 


.Column-sidebar { 





flex: 1; 、 | 
display: flex:; 对 外 面 的 弹性 盒子 来 说 是 弹性 子 元 素 ， 
flex-direction: column; 对 内 部 的 元 素 而 言 是 弹性 容器 


} 


.Column-sidebar > .tile { a 
flex: 1; < 一 给 内 部 子 元 素 加 上 


flex-grow 


J 


以 上 代码 创建 了 一 个 能 套 的 弹性 盒子 。 对 外 层 的 弹性 盒子 来 说 ，<aiv class="column- 
sidebar"> 是 弹性 子 元 素 , 对 内 部 的 弹性 盒子 来 说 , 它 就 是 弹性 容器 。 整 体 结构 如 下 所 示 (简洁 
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起 见 ， 省 略 了 文字 )。 


<main class="flex'"> 
<div class="column-main tije"> 


</div> 


<div class="column-sidebar"> 
<div class="tile">...</div> 
<div class="tile">...</div> 
</div> 
</div> 


内 部 的 弹性 盒子 的 弹性 方向 为 column， 因 此 主轴 发 生 了 旋转 ， 现 在 变 成 了 从 上 到 下 ( 副 轴 
变 成 了 从 左 到 右 )。 也 就 是 对 于 弹性 子 元 条 而 言 ，flex-basis、 flex-grow 和 flex-shrink 
现在 作用 于 元 素 的 高 度 而 不 是 宽度 。 由 于 指定 了 flex: 1， 因 此 在 必要 的 时 候 子 元 素 的 高 度 会 
扩展 到 填 满 容 禹 。 无 论 哪 边 更 高 ， 主 板块 的 底部 和 右边 第 二 个 小 板块 的 底部 都 会 对 齐 。 

水 平 弹性 盒子 的 大 部 分 概念 同样 适用 于 垂直 的 弹性 盒子 (column 或 column-reverse )， 
但 是 有 一 点 不 同 : 在 CSS 中 处 理 高 度 的 方式 与 处 理 宽 度 的 方式 在 本 质 上 不 一 样 。 弹 性 容 尊 会 占 
据 100% 的 可 用 宽度 ， 而 高 度 则 由 目 续 的 内 容 来 决定 。 即 使 改变 主轴 方向 ， 也 不 会 影响 这 一 本 质 。 

弹性 容 硕 的 高 度 由 弹性 子 元 素 决 定 , 它们 会 正好 填 满 容 锅 。 在 垂直 的 弹性 盒子 里 ， 子 元 系 的 
flex-grow 和 flex-shrink 不 会 起 作用 ， 除非 有 “外 力 ” 强行 改变 弹性 容 融 的 高 度 。 在 本 章 
的 网 页 里 ,“ 外 力 ” 束 是 从 外 层 弹 性 盒子 计算 出 来 的 高 度 。 


5.3.2 ”登录 表 早 的 样式 


网 页 的 整体 布局 已 经 完成 了 。 剩 下 的 工作 是 给 右 侧 两 个 板块 里 的 较 小 的 元 素 添 加 样式 ， 主 要 
是 登录 表单 和 注册 链接 。 登 录 表 单 不 需要 使 用 弹性 盒子 了 , 但 是 为 了 示例 的 完整 性 ,我 简单 说 明 
一 下 。 最 终 完 成 的 样式 会 如 图 5-17 所 示 。 















































Username 


Password 


Login 





图 5-17 登录 表单 


<form> 的 类 名 为 login-form， 在 CSS 中 用 作 表 单 的 选择 硕 。 将 代码 清单 5-10 添加 到 你 的 
样式 表 里 。 分 别 给 登录 表单 的 标题 、 输 入 区 域 、 按 钮 布局 。 
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代码 清单 5-10 ”登录 表单 的 样式 
.Jlogin-form h3 f{ 
margin: 0; 


ee 标题 设置 为 加 粗 、 右 
font-weight: boldgd; 对 齐 、 全 大 写 
JIT、 一 


text-align: right; 
text-transform: upPpercase; 


} 





5 ee OE :Dot ([type=checkbox]) :not ([type=radiol]) { 给 文本 类 型 的 输入 杠 
play: block,; 今 复 尘 自生 
width: 100%; (不 包含 复 选 框 和 单 先 
margin=tope 0 按钮 ) 添加 样式 





.login-form button { 
margin-top: lem; 
border: lpx solid #cc6b5a; 
background-color: white; 给 按钮 添加 样式 
padding: .5em lem; 
Cursor: pointer; 


} 


标题 使 用 了 一 些 我 们 熟知 的 字体 属性 。 text-align 将 文字 放 到 右 侧 ; text-transform 
让 文字 全 大 写 。 注 意 , 在 HTML 里 面 并 没有 全 大 写 。 当 大 写 仅 仅 是 一 种 样式 时 ， 正 稼 的 做 法 是 
在 HTML 中 按 标准 的 语法 规则 书写 ， 再 用 CSS 实现 大 写 。 这 样 将 来 不 用 重新 输入 HTML 中 的 文 
字 就 可 以 改变 大 小 写 格 式 。 

第 二 组 规则 给 输入 框 加 上 了 和 样式。 这 里 的 选择 硕 比 较 特殊 , 主要 是 因为 <input> 元 系 很 特 丈 。 
<input> 元 率 可 以 是 文本 和 密码 输入 框 以 及 很 多 类 似 的 HTML5 输入 框 ， 比 如 数字 、 邮 箱 、 日 期 
输入 框 。 它 还 可 以 是 看 起 来 完全 不 一 样 的 输入 元 素 ， 即 单 选 按钮 和 复 选 框 。 

这 里 结合 了 :not () 伪 类 和 属性 选择 需 [type=checkbox] 以 及 [type=raqio]l (参见 附录 
A )， 可 以 选中 除了 复 选 框 和 单 选 按钮 以 外 的 所 有 <input> 元 素 。 这 是 一 个 黑 名 单方 式 : 把 不 想 
选中 的 元 素 排 除 掉 。 你 也 可 以 采用 白 名 单方 式 : 使 用 多 个 属性 选择 需 将 想 要 选中 的 所 有 <input> 
类 型 都 列 出 来 ， 但 这 样 一 来 代码 就 很 长 了 。 


说 明 虽然 该 网 页 的 表单 只 使 用 了 文本 和 密码 给 入 框 ， 但 是 我 们 需要 考虑 到 这 段 CSS 
在 未 来 可 能 影响 的 其 他 标记 ， 并 尽量 照顾 到 那些 标记 。 


在 这 组 规则 里 ， 给 输入 框 设 置 了 display: block， 让 它们 单独 占据 一 行 ， 还 要 将 其 宽度 
设置 为 100%。 通 常情 况 下 ， 块 级 元 素 会 自动 填 满 可 用 宽度 ,但 是 <ijnput> 比 较 特殊 ， 其 宽度 由 
size 属性 决定 ， 而 它 表 示 不 出 深 动 条 的 情况 下 大 致 能 容纳 的 字符 数量 。 如 采 不 指定 的 话 ， 该 属 
性 就 会 恢复 为 默认 值 。 可 以 用 CSS 的 wiathn 属性 强制 指定 宽度 。 

第 三 组 规则 设置 了 Login 按钮 的 样式 。 这 些 样式 大 多 数 很 简单 ， 只 有 cursor 属性 相对 比较 
阳 生 ， 它 控制 鼠标 指针 移 到 元 素 上 时 显示 的 样式 。 它 的 人 为 pointer 时 ， 鼠 标 指针 会 变 成 市 一 
个 指示 手指 的 手 型 ， 鼠 标 悬 俘 到 链接 元 素 的 默认 鼠标 指针 就 是 这 个 形状 。 这 种 形状 告诉 用 户 元 素 
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是 可 以 点 击 的 。 这 个 细 市 能 够 让 按钮 更 完美 。 


5.4 ”对 齐 、 则 距 等 细节 


现在 你 已 牢 牢 掌握 了 Flexbox 最 核心 的 属性 ， 不 过 前 面 提 到 过 ， 还 有 很 多 选项 可 以 偶尔 派 上 
用 场 。 这 些 选 项 大 多 数 跟 弹 性 容 硕 内 弹性 子 元 系 的 对 齐 或 者 间距 相关 。 还 有 一 些 选 项 可 以 设置 换 
行 、 重 新 给 子 元 素 单 独 排序 。 这 些 控 制 属性 都 列 在 了 接 下 来 的 几 页 里 : 表 5-1 列 出 了 弹性 容 右 的 
所 有 属性 ， 表 5-2 列 出 了 弹性 子 元 素 的 所 有 属性 。 

通常 情况 下 ， 创 建 一 个 弹性 盒子 需要 用 到 前 面 提 及 的 这 些 方法 。 

口 选择 一 个 容 符 及 其 子 元 系 ， 给 容 各 设置 display: flex 

口 如 有 必要 ， 给 容 融 设置 flex-direction 

口 给 弹性 子 元 素 设置 外 边 距 和 /或 flex 值 ， 用 来 控制 它们 的 大 小 

将 元 素 大 致 摆 放 到 合适 的 位 置 后 ， 承 可 以 按 需 添加 其 他 的 Flexbox 属性 了 。 我 建议 先 熟 悉 到 
目前 为 止 介绍 的 概念 ， 然 后 继续 旋 完 本 章 剩 下 的 内 容 ， 了 解 其 他 属性 ， 等 用 得 看 的 时 候 再 记 住 这 
些 属 性 。 当 你 发 现 目 己 需要 用 到 这 些 属 性 时 ， 再 回头 参考 这 一 他 。 虽 然 剩 下 的 大 部 分 属性 相当 简 
单 ， 但 是 使 用 频率 不 遍 。 


5.4.1 理解 弹性 容器 的 属性 


弹性 容 从 上 有 好 几 个 属性 可 以 控制 弹性 子 元 系 的 布局 。 首 和 匈 是 5.3 市 介绍 过 的 flex-direction， 
下 面 来 看 看 其 他 属性 。 
































表 5-1 弹性 容器 的 属性 
属 性 值 〈 加 粗 的 为 初始 值 ) 
flex-direction 


一 
指定 了 主轴 方向 ， 副 轴 重 直 于 主轴 [ 国 面 国 | 
IT] 


flex-wrap nowrap 


指定 了 弹性 子 元 素 是 否 会 在 弹性 容 瑜 内 折 行 显示 


( 如果 flex-dqirection 为 column 或 colimn- vwrap 
reverse 时 ， 则 折 “ 列 ”显示 ) 
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属 性 
flex-flow 


Justify-content 


控制 子 元 系 在 主轴 上 的 位 置 





align-items 


控制 子 元 素 在 副 轴 上 的 位 置 


align-content 
如 果 开 局 了 flex-wrap, align-eontent 就 会 控 
制 弹性 子 元 素 在 副 轴 上 的 间距 。 如 果子 元 素 没 有 


换行 ， 就 会 忽略 align-content 





属 性 


flex-grow 
整数 ， 指 定 “ 增 长 因子 "， 决 定子 元 素 在 主轴 


方向 扩展 的 大 小 ， 用 于 填充 未 使 用 的 空间 


flex-shrink 


整数 ， 指 定 “ 收 缩 因 子 ”， 决 定子 元 素 在 主轴 


方向 收缩 的 大 小 , 防止 溢出 。 如 果 弹 性 容器 开 
启 了 flex-wrap， 则 会 忽略 该 属性 


值 〈 加 粗 的 为 初始 值 ) 
<flex-direction> <flex-wrap> 的 简写 


flex-start 
flex-end 


center 






space-between 


space-around 


flex-start 
flex-end 


center 


| 民 四 


flex-end space-between 





center space-around 
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属 性 值 
flex-basis <length> 或 <percent> 
指定 子 元 素 未 受 flex-grow 或 flex-shrink 
影响 时 的 初始 大 小 


flex <flex-grow> <flex-shrink> <flex-basis> 的 简写 


加 





align-self auto 
控制 子 元 素 在 副 轴 上 的 对 齐 方式 。 它 会 覆盖 

容器 上 的 align-items 值 。 如 果子 元 素 副 轴 

方 品 上 的 外 边 距 为 auto， 则 会 忽略 该 属性 











Order 
整数 , 将 弹性 子 元 素 从 兄 种 节点 中 移动 到 指 


定位 置 ， 上 履 盖 源码 顺序 





1. Elex-wrap 属性 

flex-wrap 属性 允许 弹性 子 元素 换 到 新 的 一 行 或 多 行 显 示 。 它 可 以 设置 为 nowrap【( 初始 
但 、wrap 或 者 wrap-reverse。 启 用 换行 后 ， 子 元 系 不 再 根据 flex-shrink 值 收缩 ， 任 何 超 
过 弹性 容 各 的 子 元素 都 会 换行 显示 。 

如 果 弹 性 方向 是 CoOlumn 或 column-reverse, 那么 flex-wrap 会 允许 弹性 子 元 素 换 到 新 
的 一 列 显示 , 不 过 这 只 在 限制 了 容 需 高 度 的 情况 下 才 会 发 生 , 否则 容 需 会 扩展 高 度 以 包含 全 部 弹 
性 子 元 素 。 

2. flex-flow 属性 

flex-flow 属性 是 flex-direction 和 flex-wrap 的 人 简写。 例如 ,flex-grow: column 
wrap 指定 弹性 子 元 系 按 照 从 上 到 下 的 方式 排列 ， 必 要 时 换 到 新 的 一 列 。 


3. justify-content 属性 

当 子 元 系 未 填 满 容 喜 时 ，justify-content 属性 控制 子 元 桑 沿 主轴 方 同 的 间距。 它 的 值 包 
括 几 个 关键 字 : flex-start、flex-end、center、 space- between HK space-arourd, 
默认 值 flex-start 让 子 元 素 从 主轴 的 开始 位 置 顺序 排列 ， 比 如 主轴 方 回 为 从 左 到 右 的 话 ， 开 
始 位 置 就 是 左边 。 如 果 不 设 置 外 边 距 ， 那么 子 元 系 之 间 不 会 产生 间距 。 如 末 值 为 flex-end, 了 于 
元 际 就 从 主轴 的 结束 位 置 开 始 排列 ，centez 的 话 则 让 子 元 素 居 中 。 

值 space-between 将 第 一 个 弹性 子 元 系 放 在 主轴 开始 的 地 方 , 最 后 一 个 子 元 素 放 在 主轴 续 
束 的 地 方 ， 剩 下 的 子 元 素 间 隅 均匀 地 放 在 这 两 者 之 间 的 区 域 。 值 space-around 类 似 ， 只 不 过 
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给 第 一 个 子 元 系 的 前 面 和 最 后 一 个 子 元 每 的 后 面 也 加 上 了 相同 的 间距 。 
间距 是 在 元 素 的 外 边 距 之 后 进行 计算 的 ， 而 且 flex-grow 的 值 要 考虑 进来 。 也 就 是 说 ， 如 
末 任 意 子 元 素 的 flex-grow 的 值 不 为 0， 或 者 任意 子 元 系 在 主轴 方向 的 外 边 距 值 为 auto， 


]uUst1Lfy-CcContent 就 失效 了 











4. align-items 属性 

justify-content 控制 子 元 素 在 主轴 方向 的 对 齐 方式 ，align-items 则 控制 子 元 素 在 副 
轴 方 问 的 对 齐 方式 。align-items 的 初始 值 为 stzetcnh， 在 水 平 排列 的 情况 下 让 所 有 子 元 素 需 
充 容 融 的 高 度 ， 在 垂 御 排列 的 情况 下 让 子 元 素 需 充 容 大 的 宽度 ， 因 此 它 能 实现 等 高 列 。 

其 他 的 值 让 弹性 子 元 系 可 以 保留 目 喘 的 大 小 ， 而 不 是 填充 容 融 的 大 小 。( 类 似 的 概念 有 
vertical-align 属性 。) 

D flex-start 和 flex-end 让 子 元 素 与 副 轴 的 开始 或 结束 位 置 对 齐 。( 如 果 是 水 平 布局 的 

话 ， 则 与 容 病 的 顶部 或 者 撒 部 分 别 对 齐 。) 

口 center 让 元 系 居 中 。 

口 paseline 计 元 系 根 据 每 个 弹性 子 元 系 的 第 一 行文 字 的 基线 对 齐 。 

当 你 想 要 一 个 弹性 子 元 系 里 大 字号 标题 的 基线 与 其 他 弹性 子 元 系 里 较 小 文字 的 基线 对 齐 时 ， 
baseline 束 能 派 上 用 场 。 

提示 justify-content 和 align-items 属性 的 名 称 很 容易 再 混 。 我 是 参考 文字 样 

式 来 记 的 : 我 们 可 以 “调整 ”( justify ) 文字 ， 让 其 在 水 平方 向 的 两 端 之 间 均 匀 分 布 ; 而 

align-items 更 像 vertical-align， 让 行内 元 素 在 重 直 方向 “对 齐 ” (align Ye 












































5. align-content 属性 

如 果 开 启 了 换行 (用 flex-wrap )，align-content 属性 就 可 以 控制 弹性 容器 内 沿 副 轴 方 
问 每 行 之 间 的 间距 。 它 文 持 的 值 有 flex-start、flex-end、center、stretch (初始 值 )、 
space-between 以 及 space-around。 这 些 值 对 间距 的 处 理 类 似 上 面 的 justify-content。 


5.4.2 ”理解 弹性 子 元 素 的 属性 


前 面 已 经 介绍 了 弹性 子 元 系 的 flex-grow、 flex-shrink、 fljex-basis 以 及 它们 的 简写 
属性 flex( 人 参见 5.2 市 )。 接 下 来 再 介绍 两 个 弹性 子 元 素 的 属性 : align-self 和 order。 





1. align-self 属性 

该 属性 控制 弹性 子 元 系 泊 着 容 检 副 轴 方 癌 的 对 齐 方式 。 它 跟 弹 性 容 表 的 align-items 属性 
效果 相同 , 但 是 它 能 单独 给 弹性 子 元 素 设 定 不 同 的 对 齐 方 式 。auto 为 初始 值 , 会 以 容 右 的 align- 
items 值 为 准 。 其 他 值 会 覆盖 容器 的 设置 。align-self 属性 支持 的 关键 字 与 align-items 一 
ss Leetart, 和 LE、 Cernter, etreteltt MK Daselines 
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2. order 属性 

正常 情况 下 ， 弹 性 子 元 条 按照 在 HIML 源码 中 出 现 的 顺序 排列。 它们 沿 者 主轴 方 辐 ， 从 主 
轴 的 起 点 开始 排列 。 使 用 oraer 属性 能 改变 子 元 素 排 列 的 顺序 。 还 可 以 将 其 指定 为 任意 正人 负 整 
数 。 如 采 多 个 弹性 子 元 素 有 一 样 的 仁 ， 它 们 就 会 按照 源码 顺序 出 现 。 

初始 状态 下 ， 所 有 的 弹性 子 元 素 的 order 都 为 0。 指 定 一 个 元 素 的 值 为 -1， 它 会 移动 到 列 
表 的 最 前 面 ; 指定 为 1, 则 会 移动 到 最 后 。 可 以 按照 需要 给 每 个 子 元 率 指 定 order 以 便 重 新 编排 
它们 。 这 些 值 不 一 定 要 连续 。 

警告 ”谨慎 使 用 order。 让 屏幕 上 的 视觉 布局 顺序 和 源码 顺序 差别 太 大 会 影响 网 站 的 可 

访问 性 ,在 大 多 数 浏览 器 里 使 用 Tab 键 浏览 元 素 的 顺序 与 源码 保持 一 致 ， 如果 视觉 上 差别 

太 大 就 会 令 人 困惑 。 视力 受 损 的 用 户 使 用 的 大 部 分 屏幕 阅读 器 也 是 根据 源码 的 顺序 来 的 。 

















5.4.3 ”使 用 对 齐 属性 


我 们 使 用 以 上 介绍 的 一 些 属性 来 完成 本 草 的 网 页 ,最 后 一 个 板块 有 一 个 带 样 式 的 价格 和 一 个 
行动 召唤 ( call-to-action，CTA ) 按钮 。 完 成 后 的 效果 如 图 5-18 所 示 。 





STARTING AT 


$00™ 


图 5-18 ”使 用 Flexbox 实现 的 文字 样式 


这 一 块 的 HTML 标记 已 在 网 页 里 号 好 了 ， 如 下 所 示 。 








<div class="tile centered"> 





<small>Starting at</small> 

<div class="cost"> 
<span class="cost-currency">$</span> 
<span class="cost-dollars">20</span> 
<span class="cost-cents">.00</span> 

</div> 

<a Class="cta-button" href="/pricing"> 
Sign up 

/a> 

</div> 


文字 $20.00 包 在 <div class="cost"> 中 ,该 元 素 将 作为 弹性 容 估 。 它 有 三 个 弹性 子 元 素 ， 
放置 三 个 需要 对 齐 的 文字 部 分 ($、20、.00 )。 这 里 用 span 而 不 是 div 来 放置 文字 ， 因 为 span 默 
认 驶 是 行内 元 素 。 如 采 因 为 某 些 原因 CSS 加 载 失 败 ， 或 者 浏览 闹 不 文 持 Flexbox， 那 么 $20.00 仍 
然 会 在 一 行 显示 。 
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下 面 的 代码 清单 里 ， 使 用 UStiftyseOntent 认 弹 性 子 元 素 在 弹性 容 需 里 水 平 居 中 ， 然后 用 
align-items 和 align-self 控制 文字 的 垂直 对 齐 。 将 代码 清单 5-11 添加 到 样式 表 。 


代码 清单 5-11 ”给 价格 板块 议 置 样 陈 
.Centered { 
text-align: center; 


l 


.Cost { 
display: flex; 
Justify-content: center; 
align-items: center; 
line-height: .7; 

} 


.COSt > span { | 覆盖 猫头鹰 选择 器 设置 
的 外 边 距 








让 弹性 子 元 素 在 主轴 和 和 
副 轴 方向 上 均 居 中 





margin-top: 0; 


’ 


.COSt-currency { 
onesL2e: Ee 
} 
.COost-dollars { 
font-size: 4rem; 给 价格 的 各 个 部 分 设置 
;| | 不 同 的 字号 


.COS 


=s 


t-cents { 
font-size: 1.5rem; 
align-self: flex-start; > 





] NA- 
窗 盖 这 个 子 元 素 的 align-items， 


We 将 其 与 容器 项 部 而 不 是 中 间 对 齐 
display: block; 
background-color: #cc6b5a; 
Color: white; 
padding: .5em lem; 
text-decoration: none; 


’ 


以 上 代码 清单 给 市 样式 的 $20.00 设置 了 Flexbox 布局 ,同时 定义 了 centered 类 让 剩 下 的 文 
字 居 中， 还 给 CTA 按钮 定义 了 cta-button 类 实现 按钮 样式 。 

代码 清单 里 有 一 个 比较 特殊 的 声明 1ine-height: .7， 这 是 因为 每 个 弹性 子 元 条 的 文字 
行 蜗 决定 了 每 个 子 元 双 的 高 度 ， 也 就 是 说 元 双 的 高 度 比 文字 本 里 的 高 度 多 一 些 。 因 为 lem 的 噩 
度 包含 了 下 伸 部 ， 而 这 里 的 文字 刚好 没有 ， 所 以 字符 实际 上 比 lem 要 敌 。 我 反复 试验 ， 下 到 20 
的 顶部 和 .00 在 视觉 上 对 齐 ， 才 得 到 这 个 值 。 想 要 了 解 更 多 文本 相关 的 内 容 ， 参 见 第 13 章 。 


5.5 值得 注意 的 地 方 


Flexbox 的 实现 是 CSS 的 一 大 进步 。 一 旦 你 败 悉 了 它 ， 你 可 能 想 要 在 页 面 的 每 个 地 方 午 开 始 
使 用 ， 不 过 你 应 该 依靠 正常 的 文档 流 ， 只 在 必要 的 时 候 才 使 用 Flexbox。 这 么 说 并 不 是 让 你 不 用 









































它 ， 而 是 希望 你 不 要 拿 着 锤子 满 世 界 找 和 钉子 。 
5.5.1 Flexbugs 


并 不 是 所 有 浏览 帮 都 完美 地 实现 了 Flexbox， 尤 其 是 IE10 和 IE11。Flexbox 在 大 多 数 情况 下 
可 以 正常 工作 ， 但 是 可 能 会 在 一 些 环境 下 遇 到 bug。 一 定 要 确保 在 你 想 要 支持 的 旧版 浏览 各 上 充 
分 测试 它 。 

与 其 花费 时 间 讨 论 你 可 能 或 者 永远 不 会 遇 到 的 bug， 我 更 愿意 推荐 一 个 特别 棒 的 资源 ， 叫 
Flexbugs。 它 的 GitHub 页 面 维 护 了 所 有 已 知 的 Flexbox 的 浏览 硕 bug (本 书写 作 时 总 共有 14 个 )， 
解释 了 哪些 环境 下 会 导致 这 些 bug， 并 大 部 分 情况 下 给 出 了 解决 方案 。 如 采 你 发 现在 某 个 浏览 大 
下 Flexbox 布局 表现 得 不 太一 样 ， 请 访问 这 个 页 面 看 看 是 不 是 遇 到 了 其 中 的 浏览 硕 bug。 


5.5.2” 整 页 布局 


Flexbox 的 一 个 有 趣 之 处 在 于 如 何 基 于 弹性 子 元 素 的 数量 和 其 中 的 内 容量 ( 及 大 小 ) 来 计算 
容 箱 的 大 小 。 因 为 如 末 网 页 很 大 ， 或 者 加 载 很 慢 时 可 能 会 产生 奇怪 的 行为 。 

当 浏 览 器 加 载 内容 时 ， 它 渐进 泻 染 到 了 屏幕 ， 即 使 此 时 网 页 的 剩余 内 容 还 在 加 载 。 假设 有 一 
个 使 用 弹性 盒子 ( flex-direction: row) 实现 的 三 列 布局 。 如 果 其 中 两 列 的 内 容 加 载 了 ， 浏 
览 需 可 能 会 在 加 载 完 第 三 列 之 前 就 泻 染 这 两 列 。 然 后 等 到 剩余 内 容 加 载 完 , 浏览 各 会 重新 计算 每 
个 弹性 子 元 素 的 大 小 , 重新 泻 染 网 页 。 用 户 会 短暂 地 看 到 两 列 布局 ， 然 后 列 的 大 小 改变 〈 可 能 改 
变 特别 大 )， 并 出 现 第 三 列 。 

Jake Archibald 是 Google Chrome 的 技术 推广 工程 师 ， 他 写 过 一 篇 文 草 DonY use flexbox for 
overall page Iayout 讨论 这 个 问题 。 你 可 以 在 这 篇 文 草 里 看 到 前 面 所 说 的 情况 。 他 给 出 的 一 个 建 
议 是 对 整 页 布局 的 时 候 使 用 网 格 布局 (第 6 草 会 介绍 ) 


说 明 只 有 一 行 多 列 的 布局 才 会 产生 这 个 问题 。 如 果 主 页 面 布局 采用 的 是 一 列 多 行 
( fljex-direction: column )， 就 不 会 出 现 以 上 问题 。 
































5.6 总结 


口 使 用 Flexbox 实现 灵活 易 操 作 的 网 页 内 容 布 局 。 

口 Autoprefixer 可 以 人 简化 Flexbox 对 旧版 浏览 大 的 支持 。 

口 使 用 flex 指定 任何 能 想到 的 弹性 子 元 素 大 小 的 组 合 。 

口 使 用 藤 套 的 弹性 盒子 来 组 成 复杂 的 布局 ， 以 及 填 满 目 适 应 大 小 的 盒子 的 高 度 。 

口 Flexbox 自动 地 创建 等 高 的 列 。 

口 使 用 al eo 证 一 个 弹性 子 元 素 在 弹性 容 硕 中 垂直 居中 。 
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网 格 布局 





本 草 概要 
日 使 用 CSS 首 个 真正 的 布局 系统 
口 理解 网 格 布 局 的 选项 
口 在 网 格 内 布局 于 元 系 
口 结合 Flexbox 和 网 格 构建 连贯 的 网 页 布局 





网 格 








Flexbox 彻底 改变 了 网 页 布局 方式 ， 但 这 只 是 开始 。 它 还 有 一 个 大 哥 : 男 一 个 称 作 网 格 布 局 
模块 ( Grid Layout Module ) 的 新 规范 。 这 两 个 规范 提供 了 一 种 前 所 未 有 的 全 功能 布局 引擎 。 

本 草 将 介绍 目前 应 该 如 何 开始 学 习 网 格 布 局 。 本 草 首 先 会 概括 介绍 网 格 布局 的 工作 原理 ， 然 
后 会 用 几 个 例子 展示 网 格 布局 的 各 种 能 力 。 它 既 可 以 实现 基础 布局 , 也 提供 了 强大 的 功能 用 于 实 
现 复杂 布局 ， 但 是 后 者 需要 掌握 额外 的 新 属性 和 关键 字 。 本 童 将 从 人 简 到 繁 逐 一 介绍 。 

CSS 网 格 可 以 定义 由 行 和 列 组 成 的 二 维 布局 ,然后 将 元 素 放 置 到 网 格 中 。 有 些 元 系 可 能 只 占 
据 网 格 的 一 个 单元 ， 另 一 些 元 素 则 可 能 占据 多 行 或 多 列 。 网 格 的 大 小 既 可 以 精确 定义 ,也 可 以 根 
据 目 身 内 容 目 动 计 算 。 你 既 可 以 将 元 系 精 确 地 放置 到 网 格 某 个 位 置 ， ee 目 动 定 
位 ， 填 充 划 分 好 的 区 域 。 使 用 网 格 能 构建 出 如 图 6-1 所 示 的 复杂 布 





























图 6-1 基础 网 格 布局 中 的 盒子 


6.1 网 页 布局 开局 新 纪元 


网 格 布局 的 诞生 不 像 其 他 CSS 特性 ， 比 如 Flexbox。 浏 览 器 实现 Flexbox 的 早期 版 本 时 ， 加 
浏览 融 前 缀 就 能 使 用 。 浏 览 需 前 组 的 本 意 是 为 了 让 开发 人 员 对 某 项 技术 进行 试验 , 并 不 是 直接 用 
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于 生产 环境 ， 然 而 实际 情况 并 非 如 此 。 
Flexbox 规范 发 展 了 好 几 年 才 达 到 稳定 状态 。 与 此 同时 ， 开 发 人 员 对 这 个 新 特性 感到 非常 兴 
奋 , 很 早 就 以 前 级 方式 使 用 起 来 。 随 着 规范 的 演变 ， 浏 览 硕 更 新 了 实现 方式 。 开 发 人 员 也 必须 相 
应 地 更 新 目 己 的 代码 ， 但 是 还 要 将 以 前 的 代码 保留 以 支持 旧版 的 浏览 器 。 这 导致 Flexbox 问世 的 
经 历 十 分 坎坷 。 
为 了 防止 历史 重演 , 浏览 硕 广 商 采 用 了 全 新 的 方式 处 理 网 格 布局 。 它 们 不 再 用 浏览 六 前 绥 方 
式 ， 用 户 必须 明确 地 开局 这 项 特性 才能 使 用 。 开 发 人 员 可 以 对 网 格 布 局 进行 试验 , 研究 它 的 工作 
方式 ， 也 可 以 提交 bug。 在 普通 用 户 看 来 ,浏览 各 对 网 格 布 局 的 支持 程度 为 0， 但 实际 上 ， 浏 览 
器 几乎 完全 实现 了 网 格 布局 。 
主流 浏览 硕 据 痉 了 过 去 那 种 漫长 的 开发 迭代 方式 ,几乎 一 夜间 推出 了 功能 齐全 的 、 成 熟 的 网 
格 布局 。2017 年 3 月， 各 大 厂商 启用 了 网 格 布局 特性 。3 周 的 时 间 内 ，Firefox、Chrome、Opera 
以 及 Safari 全 都 发 布 了 新 版 本 ， 启 用 网 格 布 局 。2017 年 6 月 ,微软 的 Edge 紧 跟 步伐 。 短 短 3 个 
月 ， 浏览 器 支持 的 用 户 量 从 0% 一 路 到 近 70%。 这 在 CSS 世界 里 可 谓 史 无 前 例 。 
网 格 规范 的 Levell 版 本 已 经 稳定 ， 所 有 现代 浏览 絮 都 芝 守 该 规 郊 。 这 章 味 着 现在 网 格 布局 
已 具备 在 生产 环境 使 用 的 条 件 ， 我 们 只 需要 稍微 做 一 些 工 作 以 便 合理 回 退 。 本 章 最 后 会 谈 到 这 个 
话题 。 


说 明 ”微软 实现 网 格 布局 的 早期 版 本 时 使 用 了 浏览 器 前 级 ， 也 就 是 IE10 和 IE11 使 用 
-ms- 前 级 支持 了 部 分 网 格 布局 特性 。 为 了 支持 这 些 浏览 器 ， 建 议 使 用 第 5 齐 提 及 的 
Autoprefixer ( 参见 第 $ 章 附加 栏 “浏览 器 前 缓 ”)。 














开局 试验 特性 

在 浏览 器 默认 支持 网 格 布局 之 前 , 开发 人 员 可 以 开启 这 项 特性 。 虽然 现在 网 格 布局 已 经 默 
认 支 持 ， 但 还 是 需要 知道 如 何 访问 其 他 试验 特性 ， 以 便 将 来 学 习 它 们 。 

在 Chrome 和 Opera 浏览 器 中 ， 可 以 在 浏览 器 设置 里 打开 相应 的 开关 来 访问 试验 特性 。 在 
Chrome 中 ， 在 地 址 栏 输入 chrome://flags， 按 下 Enter 键 。 在 Opera 浏览 器 中 ， 把 网 址 换 成 
opera:/flags。 然 后 滚动 到 “Experimental Web Platform features”( 或 者 使 用 浏览 器 的 搜索 功能 
然后 点 击 开启 ( Enabled )。 

在 Firefox 中 , 需要 下 载 和 安装 Firefox Developer Edition 或 者 Firefox Nightly。 在 Safari 中 ， 

需要 安装 Safari Technology Preview 或 者 Webkit Nightly Builds 版 。 


构建 基础 网 格 


现在 , 我们 先 创建 一 个 简单 的 网 格 布局 ， 以 确认 浏览 器 支持 该 特性 。 你 需要 将 六 个 盒子 放 在 
三 列 中 ， en 青 单 6-1 所 示 。 
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EO | 


图 6-2 ”由 三 列 两 行 构成 的 简单 网 格 
创建 一 个 新 网 页 ， 给 它 外 链 一 个 新 的 样式 表 。 将 代码 清单 6-1 复制 到 网 页 中 。 在 下 面 的 代码 
里 ,我 给 子 元 条 加 上 了 从 a 到 f 的 字母 ， 这样 能 清楚 地 看 到 网 格 里 面 每 个 元 系 的 位 置 。 
代码 清单 6-1 包含 六 个 元 素 的 网 格 
| 网 格 容器 






<div class="grid"> 
<div class="a">a</div> 
"~>b</div> 


div class="c">c</diyv Se 可 
容器 内 的 子 元 素 成 


<div class="b 
C 

<div class="d">d</div> 、 LE 
为 了 网 格 元 素 
下 


<div class="e">e</div> 


<div class="f">f</div> 


</div> 


跟 Flexbox 类 似 ， 网 格 布局 也 是 作用 于 两 级 的 DOM 结构 。 设 置 为 aisplav: grig 的 元 系 
成 为 一 个 网 格 容器 ( grid container )。 它 的 子 元 素 则 变 成 网 格 元 素 〈 grid items )。 
接 下 来 ， 要 用 一 些 新 的 属性 来 定义 网 格 的 细节 。 将 代码 清单 6-2 中 的 样式 添加 到 样式 表 。 


代码 清单 6-2 ”基础 网 格 布局 


| 将 元 素 设 为 
display: grid; 网 格 容器 
grid-template-columns: 1fr 1fr 1fr; 定义 等 宽 的 
grid-template-rows: 1lfr 1fr; 三 列 
grid-gap: 0.5em; 

| 定义 等 高 的 

两 行 

.riQ SS 2 
background-color: darkgray; 

Color: white; 给 每 个 网 格 的 单元 
Pao Ln ei 格 之 间 加 上 间隔 


border-radius: 0.5em; 


y 


在 支持 网 格 布局 的 浏览 器 中 , 这 段 代 码 会 演 染 三 列 , 共 六 个 大 小 相等 的 盒子 ( 如 图 6-2 所 : )。 
这 里 发 生 了 一 些 新 的 布局 行为 。 下 面 将 详细 介绍 。 

首先 ,使 用 aisplay: griqd 定义 一 个 网 格 容器 。 容 顺 会 表现 得 像 一 个 块 级 元 素 ，100% 填 
充 可 用 宽度 。 也 可 以 使 用 in1line-grig (尽管 这 段 代 码 没 写 )， 这 样 元 素 就 会 在 行内 流动 ， 且 宽 
度 只 能 够 包含 子 元 系 ,不 过 inline-gria 的 使 用 频率 不 高 。 
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接 下 来 是 新 属性 . io=temliate-e0lumie 下 二 和 二 这 两 个 属性 定 
义 了 网 格 每 行 每 列 的 大 小 。 本 例 使 用 了 一 种 新 单位 fr ， 代 表 每 一 列 (或 每 一 行 ) 的 分 数 单位 
( fraction unit )。 这 个 单位 跟 Flexbox 中 flex-grow 因子 的 表现 一 样 。griqd-template-columns: 
1fr 1fr 1fr 表示 三 列 等 宽 。 

不 一 定 非得 用 分 数 单 位 ， 可 以 使 用 其 他 的 单位 ， 比 如 px、em 或 百分数 。 也 可 以 混搭 这 几 种 
单位 ， 例 如 ，griadq-template-columms: 300px 1fr 定义 了 一 个 固定 宽度 为 300px 的 列 ， 后 
面 跟着 一 个 会 填 满 剩余 可 用 空间 的 列 。?t 的 列 宽 是 1 人 i 的 两 倍 。 

最 后 ，grid-gap 属性 定义 了 每 个 网 格 单元 之 间 的 间距 。 也 可 以 用 两 个 信 分 别 指定 垂 百 和 水 
平方 向 的 间距 ( 比如 griq-gap: 0.5em 1em ) 

可 以 试 试 改 一 下 这 些 值 , 看 会 对 最 终 布 局 产生 什么 影响 。 试 试 深 加 新 的 列 或 者 改变 宽度 ,， 添 
加 或 删除 网 格 元 素 。 在 本 音 的 其 他 布局 里 也 要 继续 这 样 试验 ， 这 是 掌握 新 东西 最 好 的 方法 。 


6.2 ”网 格 神 析 


理解 网 格 的 各 个 部 分 很 重要 。 前 面 已 经 提 及 网 格 容 右 和 网 格 元 素 , 这 些 是 网 格 布局 的 基本 元 
素 。 另 外 四 个 重要 的 概念 如 图 6-3 所 示 。 

口 网 格 线 (grid line ) 网 格 线 构成 了 网 格 的 框架 。 一 条 网 格 线 可 以 水 平 或 垂直 ， 也 可 以 
位 于 一 行 或 一 列 的 任意 一 侧 。 如 果 指 定 了 grid-gap 的 话 ， 它 就 位 于 网 格 线 上 。 

口 网 格 轨道 ( grid track ) 一 一 一 个 网 格 轨道 是 两 条 相 邻 网 格 线 之 间 的 空间 。 网 格 有 水 平 轨道 
( 行 ) 和 垂直 轨道 ( 列 )。 

口 网 格 单元 ( grid cell ) 网 格 上 的 单个 空间 ， 水 平和 垂直 的 网 格 轨道 交叉 重 春 的 部 分 。 

口 网 格 区 域 (grid area ) 网 格 上 的 矩形 区 域 ， 由 一 个 到 多 个 网 格 单元 组 成 。 该 区 域 位 于 
两 条 垂直 网 格 线 和 两 条 水 平 网 格 线 之 间 。 


人 


网 格 线 网 格 轨道 网 格 单元 网 格 区 域 
图 6-3 网 格 的 组 成 部 分 


构建 网 格 布局 时 会 涉及 这 些 组 成 部 分 。 比如 声明 grid-template-columns: 1fr 1fr 1fr 
承 会 定义 三 个 等 宽 上 且 和 对 御 的 网 格 轨道 ， 同 时 还 定义 了 四 条 垂直 的 网 格 线 : 一 条 在 网 格 最 左边 ， 两 
条 在 每 个 网 格 轨道 之 间 ， 还 有 一 条 在 最 右边 。 

第 5 章 用 Flexbox 构建 了 一 个 网 页 。 现 在 请 回头 看 看 当时 的 设计 ， 考 虑 如 何 用 网 格 来 实现 。 
设计 如 图 6-4 所 示 ， 虚 线 标 出 了 每 个 网 格 单元 的 位 置 。 注 意 ， 某 些 部 分 路 越 了 好 几 个 网 格 单元 ， 
也 就 是 填充 了 更 大 的 网 格 区 域 。 
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Features Pricing Support 


Team collaboration done right 


Username 
Thousands of teams from all over the world turn to Ink to 
communicate and get things done. 


Password 


Starting at 


$O(0 一 


图 6-4 用 网 格 创建 的 网 页 布局 。 虚 线 标 出 了 每 个 网 格 单元 的 位 置 


这 个 网 格 有 两 列 和 四 行 。 前 两 个 水 平 网 格 轨 赴 分别 是 网 页 标题 (Ink ) 和 主导 航 沫 单 。 主 区 
域 填 满 了 第 一 个 竺 百 轨 让 剩 下 的 两 个 网 格 单元 , 两 个 侧 边栏 的 板 英 分 别 放 在 第 二 个 垂下 轨道 剩 下 
的 两 个 网 格 单元 里 。 


说 明 设计 不 必 填 满 每 个 网 格 单元 。 在 想 留 白 的 地 方 让 网 格 单元 为 室 即 可 。 


有 一 点 值得 注意 的 是 ， 使 用 网 格 并 不 会 让 Flexbox 失去 用 武之 地 。 在 这 个 网 页 的 布局 里 面 
Flexbox 仍然 是 重要 部 分 。 我 会 把 应 当 使 用 Flexbox 的 地 方 指出 来 。 

使 用 Flexbox 布局 时 ， 需 要 按照 一 定 方式 航 套 元 素 。 第 5 章 用 Flexbox 定义 了 列 ， 然 后 将 力 
一 个 Flexbox 般 套 在 里 面 定 义 行 ( 人 参见 代码 清单 5-1 ) 用 网 格 实现 同样 的 布局 需要 改 一 下 HIML 
结构 : 将 舱 僚 的 HTML 拉平 。 放 在 网 格 里 的 每 个 元 系 都 必须 是 主要 网 格 容 俘 的 于 元 系 。 新 的 标 
记 如 代码 清单 6-3 所 示 ， 按 该 代码 清单 所 示 创 建 一 个 新 的 网 页 〈 或 者 修改 第 5 章 里 的 代码 )。 


代码 清单 6-3 一 个 网 格 布 局 的 HTML 结构 














<body> 变 成 了 网 格 
<div class="container"> 容 兹 
<header> 
<hi1 class="page-heading">Ink</hi> py 于 
</header> 每 个 网 格 元 素 必须 是 


网 格 容器 的 子 元 素 


<nadvVv> 
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<ul class="site-nav"> 

<l1i><a href="/">Home</a></11i> 
1i><a href="/features">Features</a></1i> 
11i><a href="/pricing">Pricing</a></1i> 
1i><a href="/support">Support</a></1i> 
11 class="nav-right"> 
<a href="/about">About</a> 
</11i> 








</ul> 
</nNnav> 


<main class="main tile"> 
<hi>Team collaboration done right</hi> 
<p>Thousands of teams from all over the 
world turn to <b>Ink</b> to communicate 
angd get things done.</p> 
</main> 


<div class="sidebar-top tile"> 
<form class="login-form"> 





<h3>Login</h3> 
<p> 每 个 网 格 元 素 必须 是 
<label for="username">Username</label> 网 格 容器 的 子 元 素 
日 ~ 


<input id="username" type="text" 
name="username"/> 
</D> 
<p> 
<label for="password">Password</l1abel> 
<input id="password" type="password" 
name="pPassword"/> 
</D> 
<button type="submit">Login</button> 
</form> 
</div> 


<div class="sidebar-bottom tile centered"> 
<small>Starting at</small> 





<div class="cost"> 
<span class="cost-currency">$</span> 
<span class="cost-dollars">20</span> 
<span class="cost-cents">.00</span> 
</div> 
<a Class="cta-button" href="/pricing"> 
Sign up 
</a> 
</div> 
</div> 
</body> 


这 个 版 本 的 HTML 将 网 页 的 所 有 部 分 部 变 成 了 网 格 元 系 : 头 部 、 沫 单 (nav )、 主 区 域 ,还 
有 两 个 侧 边 栏 。 主 区 域 和 两 个 侧 边 柱 都 加 上 了 类 tile, 用 来 指定 元 素 共 有 的 日 色 背 景 和 内 边 距 。 
接 下 来 给 网 页 加 上 网 格 布局 , 并 将 每 个 部 分 放 到 相应 的 位 置 。 我们 暂时 将 从 第 5 章 的 代码 里 
引入 很 多 样式 ， 不 过 可 以 先 看 一 下 加 上 网 格 后 网 页 大 致 的 形状 。( 我 发 现 从 外 到 内 构建 网 页 更 简 
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单 。) 构建 完 基础 网 格 ， 网 页 会 如 图 6-5 所 示 。 


Team collaboration done right Lwin 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 
Username 


Password 


Login 





图 6-5 用 基础 网 格 构建 出 来 的 网 页 


创建 一 个 空 的 样式 表 ， 在 网 页 里 外 链 该 样式 表 ， 并 添加 代码 清单 6-4。 这 段 代码 引入 了 儿 个 
新 概念 ， 我 稍 后 会 逐一 介绍 。 


代码 清单 6-4 使 用 网 格 添加 最 外 层 的 网 页 布局 


:root { 
box-sizing: border-box; 


} 


* 了 
: :before, 
-after 1 
box-sizing: inherit; 


} 


body { 
background-color: #7091b90; 
font-family: Helvetica, Arial, sans-serif; 


} 


.Container ({ 


nr \\ 人 
display: grid; ne 
grid-template-columns: 2fr 1fr; = 
9 0 em ON : repeat (4, auto); 定义 四 个 水 平 轨道 ， 
grid-gap: 1.5em; 大 小 为 auto 


max-width: 1080px; 


图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com，) 专 享 尊重 版 权 
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margin: 0 auto; 


} 


[is ts he 从 1 号 垂直 网 格 线 跨越 
nav 1{ 到 3 号 垂直 网 格 线 
grid-column: 1 / 3; 


} 


grid-row: span 1; 刚好 占据 一 条 水 平 网 
格 轨道 


.main { 
grid-column: 1 / 2; 
grid-row: 3 / 5; 

} 


.Sidebar-top { 


grid-column: 2 / 3; 将 其 他 网 格 元 素 定位 
grid-row: 3 / 4; 到 不 同 的 网 格 线 之 间 


.Sidebar-bottom { 
grid-column: 2 / 3; 
grid-row: 4 / 5; 

} 


.tile f{ 
padding: 1.5em; 
background-color: #fff; 
} 


.tile > :first-child { 
margin-top: 0; 


} 


.tile * + * { 
margin-top: 1.5em; 


) 


这 段 代 码 引 入 了 很 多 新 概念 。 下 面 将 逐一 介绍 。 

代码 首先 设置 了 网 格 容 化 ， 并 用 grid-template=eo0lumns 和 :DiQ=EEmeTStEG=EDWS 定 
义 了 网 格 轨 道 。 因 为 列 的 分 数 单位 分 别 是 2 人 让 和 1 分 , 所 以 第 一 列 的 宽度 是 第 二 列 的 两 倍 。 定 义 行 
的 时 候 用 到 了 一 个 新 方法 : repeat () 图 数 。 它 在 声明 多 个 网 格 轨 送 的 时 候 提 供 了 简写 方式 。 

grid-template-rows: repeat (4，auto) ;定义 了 四 个 水 平 网 格 轨道 ， 高 度 为 auto， 这 
等 价 于 grid-template-rows: auto auto auto auto。 轨 道 大 小 设置 为 auto， 轨 道 会 根据 
目 身 内 容 扩 展 。 

用 repeat () 符号 还 可 以 定义 不 同 的 重复 模式 ， 比 如 repeat (3，2fr 1fr) 会 重复 三 遍 这 
个 模式 ， 从 而 定义 六 个 网 格 轨道 ， 重 复 的 结果 是 2fr 1fr 2fr 1fr 2fr 1fr。 图 6-6 展 示 了 最 
终结 果 。 
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grid-template-columns: repeat (3, 2fr 1fr); 


EE fs Dal fs ET fs 


grid-template-columns: lfr repeat(3, 3fr) lfr; 





图 6-6 在 模板 定义 里 使 用 repeat () 方 法 定义 重复 模式 
还 可 以 将 repeat () 作为 一 个 更 长 的 模式 的 一 部 分 。 比 如 grigd-template-columns: 1fr 
repeat (3，3fr) 1fr 定义 了 一 个 1] 他 的 列 ， 接 独 是 三 个 3 如 的 列 ， 最 后 还 有 一 个 1 他 的 列 〈 可 
以 用 1fr 3fr 3fr 3fr 1fr 表示 )。 可 以 看 出 来 因为 展开 的 写法 无 法 一 目 了 然 ， 所 以 才 产 生 了 
repeat () 这 种 简写 方式 。 


6.2.1 网 格 线 的 编号 


网 格 轨 直 定义 好 之 后 , 要 将 每 个 网 格 元 素 放 到 特定 的 位 置 上 。 浏览 融 给 网 格 里 的 每 个 网 格 线 
都 赋予 了 编号 ， 如 图 6-7 所 示 。CSS 用 这 些 编号 指出 每 个 元 系 应 该 摆 放 的 位 置 。 


1 2 3 
1 























图 6-7 网 格 线 编号 从 左上 和 角 为 1 开始 递增 ， 负 数 则 指 回 从 右 下 角 开 始 的 位 置 


可 以 在 grid-column 和 grigd-row 属性 中 用 网 格 线 的 编号 指定 网 格 元 系 的 位 置 。 如 采 想 要 一 
个 网 格 元 素 在 垂直 方向 上 攻 越 1 号 网 格 线 到 3 号 网 格 线 , 就 需要 给 元 系 设 置 grid-column: 1 / 3。 
或 者 设置 grid-row: 3 / 5 让 元 素 在 水 平方 向 上 跨越 3 号 网 格 线 到 5 号 网 格 线 。 这 两 个 属性 一 
起 就 能 指定 一 个 元 系 应 该 放置 的 网 格 区 域 。 

在 本 章 的 网 页 里 ， 这 些 网 格 元 素 是 按 以 下 代码 片段 定位 的 。 
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.main { 
GELEQ- EOLumri 1 -2.3 
grid-row: 3 / 5; 

} 


.Sidebar-top { 
grid-column: 2 / 3; 
grid-row: 3 / 4; 

} 


.Sidebar-bottom { 
grid-column: 2 / 3; 
orid=rTOow: 4 7 53 

} 


这 段 代 码 将 main 元 系 放 在 第 一 列 (1 号 到 2 号 网 格 线 之 间 )， 踪 越 第 三 行 到 第 四 行 (3 号 到 
5 写 网 格 线 ) 的 位 置 。 侧 边栏 的 两 个 板块 放 在 右 列 (2 号 到 3 号 网 格 线 之 间 )， 并 且 在 第 三 行 和 第 
四 行 上 下 排列 。 


说 明 这 些 属 性 实际 上 是 简写 属性 : grid-column 是 grid-column-start 和 
grid-column-end 的 简写 ; grid-row 是 grid-row-start 和 grid-row-end 的 简 


写 。 中 间 的 斜 线 只 在 简写 属性 里 用 于 区 分 两 个 值 ， 斜 线 前 后 的 空格 不 作 要 求 。 
定位 header 和 nav 的 规则 集 稍 有 变化 。 以 下 代码 片段 用 相同 的 规则 集 同时 布局 这 两 者 。 





header., 

nav { 
grid-column: 1 / 3; 
grid-row: span 1; 


代码 里 使 用 之 前 介绍 的 grid-column 写法 ,让 网 格 元 素 占 满 网 格 的 宽度 。 其 实 还 可 以 用 一 
个 特别 的 关键 字 span 来 指定 grid-row 和 grid-column 的 值 ( 这 里 用 在 了 grid-row ur 
这 个 关键 字 告 诉 浏 览 顶 元 素 需 要 占据 一 个 网 格 轨道 。 因 为 这 里 没有 指出 具体 是 哪 一 行 , 所 以 会 根 
据 网 格 元 系 的 布局 算法 〈placement algorithm ) 目 动 将 其 放 到 合适 的 位 置 。 布 局 算法 会 将 元 系 放 
在 网 格 上 可 以 容纳 该 元 素 的 第 一 处 可 用 空间 , 本 例 中 是 第 一 行 和 第 二 行 。 本 章 稍 后 会 详细 解释 该 
算法 。 




















6.2.2 与 Flexbox 配 合 


学 了 网 格 之 后 ， 开 发 人 员 经 常会 问 到 Flexbox， 特 别 是 会 问 这 两 种 布局 方式 是 否 互 斥 。 当 然 
不 会 ,它们 是 互补 的 。 二 者 几乎 是 一 起 开发 出 来 的 ， 虽 然 它 们 的 功能 有 一 些 重 三 的 地 方 , 但 是 它 
们 各 目 擅 长 的 场景 不 一 样 。 在 一 个 设计 场景 里 ， 要 根据 特定 的 需求 来 做 出 选择 。 这 两 种 布局 方式 
有 以 下 两 个 重要 区 别 。 

D Flexbox 本 质 上 是 一 维 的 ， 而 网 格 是 二 维 的 。 
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口 Flexbox 是 以 内 容 为 切入 点 由 内 癌 外 工作 的 ， 而 网 格 是 以 布局 为 切入 点 从 外 向 内 工作 的 。 

因为 Flexbox 是 一 维 的 ， 所 以 它 很 适合 用 在 相似 的 元 素 组 成 的 行 〈 或 列 ) 上 。 它 支持 用 
flex-wrap 换行 ， 但 是 没 法 让 上 一 行 元 素 跟 下 一 行 元 素 对 齐 。 相 反 ， 网 格 是 二 维 的 ， 旨 在 解雇 
一 个 轨 送 的 元 素 跟 另 一 个 轨道 的 元 素 对 齐 的 问题 。 它 们 的 区 别 如 图 6-8 所 示 。 


- 维 的 入 齐 /A 














如 村 换行 了 ， 一 行 的 
元 素 就 不 一 定 跟 另 一 
行 的 元 素 对 齐 





网 格 : 


图 6-8 Flexbox 在 一 个 方向 上 对 齐 元 素 ， 而 网 格 在 两 个 方向 上 对 齐 元 素 


按照 CSS WG 的 成 员 Rachel Andrew 的 说 法 ， 它 们 的 第 二 个 区 别 在 于 ，Flexbox 以 内 容 为 切 
入 点 由 内 问 外 工作 ， 而 网 格 以 布局 为 切入 点 由 外 癌 内 工作 。Flexbox 让 你 在 一 行 或 一 列 中 安排 一 
系列 元 素 ， 但 是 它们 的 大 小 不 需要 明确 指定 ， 每 个 元 素 占 据 的 大 小 根据 自身 的 内 容 雇 定 。 

而 在 网 格 中 ,首先 要 描述 布局 ， 然 后 将 元 素 放 在 布局 结构 中 去 。 虽 然 每 个 网 格 元 素 的 内 容 都 
能 影响 其 网 格 轨道 的 大 小 , 但 是 这 同时 也 会 影响 整个 轨道 的 大 小 , 进而 影响 这 个 轨道 里 的 其 他 网 
格 元 又 的 大 小 。 

用 网 格 给 网 页 的 主 区 域 定位 是 因为 我 们 希望 内 容 能 限制 在 它 所 在 的 网 格 内 , 但 是 对 于 网 页 上 
的 其 他 元 系 ， 比 如 导航 末 单 ， 则 允许 内 容 对 布局 有 更 大 的 有 影响。 也 就 是 说 ,文学 多 的 元 素 可 以 宽 
一 些 ， 文 学 少 的 元 系 则 可 以 罕 一 些 。 同 时 这 还 是 一 个 水 平 (一 维 ) 布局 。 因 此 ， 用 Flexbox 来 处 
理 这 些 元 素 更 合适 。 接 下 来 用 Flexbox 给 这 些 元 素 布 局 ， 完 成 整个 页 面 。 

如 图 6-9 所 示 ， 顶 部 导航 亲 单 里 的 链接 是 水 平 对 齐 的 。 同 时 用 Flexbox 实现 右 下 角 的 价格 的 
样式 。 加 上 这 些 布局 和 少量 其 他 样式 后 ， 网 页 的 最 终 样 式 就 完成 了 。 









































Features Pricing 


Team collaboration done right 


Thousands of teams from all over the world turn to Ink to communicate and get things done. 


图 6-9 完成 的 网 页 样式 


6.2 ”网 格 剖 析 


Username 


Password 


Starting at 


$200™ 
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除了 整体 的 布局 是 用 网 格 实现 的 ( 如 代码 清单 6-4 所 示 )， 余 下 的 这 些 样 式 规则 跟 第 5 章 一 
样 。 代 码 清单 6-5 的 代码 与 第 5 章 重 复 ， 将 它们 加 入 到 样式 表 中 。 


代码 清单 6-5 ”剩余 的 网 页 样式 


.Page-heading f{ 
margin: 0; 


} 


.Site-nav { 
display: flex; 
margin: 0; 
padding: .5em; 


background-color: #5f4lb44,; 
list-style-type: none; 
border-radius: .2em; 


J 


.Site-nav > 11 { 
margin-top: 0; 


L 


.Site-nav > 11i1 >a ft 
display: block; 
padding: .5em lem; 


background-color: #cc6b5a; 


Color: white; 


text-decoration: none; 


) 


.Site-nav > ]1 + 1 { 


用 Flexbox 实现 菜单 
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margin-left: 1.5em; 


.Site-nav > .nav-right { 
margin-left: auto; 


.J]ogin-form h3 f{ 
margin: 0; 
font-size: .9em; 
font-weight: boldgd; 
text-align: right,; 
text-transform: upPpercase; 


.login-form input:not([type=checkbox]) :not ([type=radio]) { 
display: block; 
margin-top: 0; 
width: 100%; 


.login-form button { 
margin-top: lem; 
border: lpx solid #cc6b5a; 
background-color: white; 
padding: .5em lem; 
Cursor: pointer; 


.Centered { 
text-align: center; 


.Cost { 


display: flex; 用 Flexbox 实现 价格 


的 样式 


justify-content: center; 
align-items: center; 
line-height: .7; 


.COSL > span { 
margin-top: 0; 


.COSt-currency { 
font-size: 2rem; 
} 
.Cost-dollars { 
font-size: 4rem; 
} 


.CoSt-cents { 





font-size: 1.5rem; 
align-self: flex-start; 
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.cta-button { 
display: block; 
background-color: #cc6b5a; 
Color: white; 
padding: .5em lem; 
text-decoration: none; 


} 

当 设 计 要 求 元 兹 在 两 个 维度 上 都 对 齐 时 ， 使 用 网 格 。 当 只 关心 一 维 的 元 素 排 列 时 ， 使 用 
Flexbox。 在 实践 中 ,这 通常 (并非 总 是 ) 意味 着 网 格 更 适合 用 于 整体 的 网 页 布局 ， 而 Flexbox 更 
适合 对 网 格 区 域内 的 特定 元 妹 布局 。 继 续 用 网 格 和 Flexbox， 你 就 会 对 不 同情 况 下 该 用 哪 种 布局 
方式 得 心 应 手 。 


6.3 蔡 代 语法 

布局 网 格 元 素 还 有 另外 两 个 替代 语法 : 命名 的 网 格 线 和 命名 的 网 格 区 域 。 至 于 选择 哪个 纯 属 
个 人 偏好 。 在 某 些 设计 中 ， 一 种 语法 会 比 另 一 种 语法 更 好 理解 。 下 面 分 别 介绍 这 两 个 语法 。 
6.3.1 命名 的 网 格 线 


有 时 候 记 录 所 有 网 格 线 的 编号 实在 太 厅 烦 了 , 尤其 是 在 处 理 很 多 网 格 轨 站 时 。 为 了 能 简单 点 ， 
可 以 给 网 格 线 命名 ,并 在 布局 时 使 用 网 格 线 的 名 称 而 不 是 编号 。 声 明 网 格 轨道 时 ,可 以 在 中 括号 
内 写 上 网 格 线 的 和 名称， 如 下 代码 片段 所 示 。 


grid-template-columns: [start] 2fr [center] 1fr [endl]; 


这 条 声明 定义 了 两 列 的 网 格 ， 三 条 垂直 的 网 格 线 分 别 叫 作 start、center 和 end。 之 后 定义 网 
格 元 系 在 网 格 中 的 位 置 时 ， 可 以 不 用 编号 而 是 用 这 些 名 称 来 声明 ， 如 下 代码 所 示 。 












































grid-column: start / center; 


这 条 声明 将 网 格 元 素 放 在 1 号 网 格 线 (start ) 到 2 号 网 格 线 (center ) 之 间 的 区 域 。 还 可 以 给 
同一 个 网 格 线 提供 多 个 名 称 ， 比 如 下 面 的 声明 〈 为 了 可 谈 性 ， 这 里 将 代码 换行 了 )。 
grid-template-columns: [left-start] 2fr 


[left-end right-start] 1fr 
[right-engd]; 


在 这 条 声明 里 ，2 号 网 格 线 既 叫 作 left-end 也 叫 作 right-start， 之 后 可 以 任 选 一 个 名 称 使 用 。 
这 里 还 有 一 个 彩蛋 : 将 网 格 线 命 名 为 left-start 和 lefttend， 就 定义 了 一 个 叫 作 left 的 区 域 ， 这 个 区 
域 覆 盖 两 个 网 格 线 之 间 的 区 域 。-start 和 -eng 后 绥 作 为 关键 字 ， 定 义 了 两 者 之 间 的 区 域 。 如 
果 给 元 素 设 置 Cen ett 它 就 会 跨越 从 left-start 到 left-eng 的 区 域 。 

代码 清单 6-6 使 用 命名 的 网 格 实现 网 页 布局 。 它 的 效果 跟 代码 清单 6-4 一 样 。 用 代码 清单 6-6 
更 新 样式 表 。 
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代码 清单 6-6 ”用 命名 的 网 格 线 实现 网 格 布局 
.Container { 
display: grid; 


grid-template-columns: | 2 竺 站 给 每 个 垂直 的 网 格 
[left-end right-start] 1fr 全 人 
线 命 名 
[right-endl]; 
grid-template-rows: repeat (4, [row] auto) ; 
grid-gap: 1.5em; 将 水 平 网 格 线 命名 
max-width: 1080px; 为 “row” 


margin: 0 auto; 


} 


header., 
nav { 
grid-column: left-start / right-end; 





grid-row: span 1; 
} 
跨越 left-start 到 left-end 


A 之 间 的 区 域 
grid-column: left; 
grid-row: row 3 / span 2; 
} 从 第 三 行 网 格 线 开始 放置 元 素 ， 
跨越 两 个 网 格 轨 道 


.Sidebar-top { 
grid-column: right; 
grid-row: 3 / 4; 
} 跨越 right-start 到 
right-end 的 区 域 
.Sidebar-bottom f{ 
grid-column: right; 





grid-row: 4 / 5; 
} 


这 个 例子 用 命名 的 网 格 线 将 每 个 元 素 放 在 的 相应 网 格 列 上 , 并且 在 repeat () 里 声明 了 一 条 
命名 的 水 平 网 格 线 ， 于 是 每 条 水 平 网 格 线 被 命名 为 row( 除了 最 后 一 条 )。 这 看 起 来 很 不 可 思议 ， 
但 是 重复 使 用 同一 个 名 称 完全 合法 。 人 然后 将 main 元 素 放 在 从 row 3 (第 三 个 叫 row 的 网 格 线 ) 
开始 的 地 方 ， 并 路 越 两 个 网 格 轨道 。 

可 以 以 各 种 方式 命名 的 网 格 线 。 它 们 在 网 格 里 的 用 法 也 是 五 花 八 门 , 这 取决 于 每 个 网 格 特定 
的 结构 ， 比 如 可 以 实现 如 图 6-10 所 示 的 布局 。 
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图 6-10 ”将 网 格 元 素 放 在 第 二 个 “col” 网 格 线 处 ， 跨 越 两 个 轨道 (col 2 / span 2 ) 
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这 个 场景 展示 了 一 种 重复 模式 : 每 两 个 网 格 列 为 一 组 , 在 每 组 的 两 个 网 格 轨道 之 前 命名 一 条 
网 格 线 (grid-template-columns: repeat (3，[col] 1fr 1fr) )。 然 后 就 可 以 借助 命名 
的 网 格 线 将 一 个 元 素 定 位 到 第 二 组 网 格 列 上 (gridq-column: col 2 / span 2) 


6.3.2 命名 网 格 区 域 


男 一 个 方式 是 命名 网 格 区 域 。 不 用 计算 或 者 命名 网 格 线 ， 和 直接 用 命名 的 网 格 区 域 将 元 系 定 位 
到 网 格 中 。 实 现 这 一 方法 需要 借助 网 格 容 作 的 grid-template 属性 和 网 格 元 素 的 grid-area 
属性 。 

代码 清单 6-7 展示 了 该 方法 。 这 段 代码 的 效果 还 是 跟前 面 的 布局 〈 代 码 清单 6-4 和 代码 清 
单 6-6 ) 完全 一 样 。 它 是 一 个 符 代 请 法。 按照 代 码 清单 6-7 更 新 样式 表 。 


代码 清单 6-7 使 用 命名 的 网 格 区 域 


.Container { 














display: grid; 
grid-template-areas: "title title" 


"i 将 每 个 网 格 单元 分 配 到 一 个 
niaini, ausidel 命名 的 网 格 区 域 中 
"main aside2"; 
rid-Cenmnblearte=-coLinns. 257 217》 跟 之 前 一 样 定义 网 格 
grid-template-rows: repeat (4，auto) ; 轨道 的 大 小 
grid-gap: 1.5em; 
max-width: 1080px; 
margin: 0 auto; 
} 
header { 
grid-area: title; 
} 
nav { 
grid-area: nayv; 
} 
”0 main; 将 每 个 网 格 元 素 放 到 一 
' 上 命名 的 网 格 区 域 


) 


.Sidebar-top { 
grid-area: asidel; 


; 


.Sidebar-bottom { 
grid-area: aside2; 


} 


grid-template-areas 属性 使 用 了 一 种 ASCIIL art 的 语法 ， 可 以 直接 在 CSS 中 国 一 个 可 
视 化 的 网 格 形象 。 该 声明 给 出 了 一 系列 加 引号 字符 串 ， 个 字符 串 代 表 网 格 的 一 行 , 字符 串 内 
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用 空格 区 分 每 一 列 。 

在 这 个 例子 中 , 第 一 行 完 全 分 配给 了 网 格 区 域 itle, 第 二 行 则 分 配给 了 nav。 接 下 来 两 行 
的 左 列 分 配给 了 main， 侧 边栏 的 板块 分 别 分 配给 了 asiaqel 和 aside2。 用 orid-area 属性 将 
每 个 网 格 元 素 放 在 这 些 命名 区 域 中 。 


警告 ”每 个 命名 的 网 格 区 域 必 须 组 成 一 个 矩形 。 不 能 创造 更 复杂 的 形状 ， 比 如 工 或 者 品 型 。 


还 可 以 用 句点 〈. ) 作为 名 称 ， 这 样 便 能 空 出 一 个 网 格 单元 。 比 如 ， 以 下 代码 定义 了 四 个 网 
格 区 域 ， 中 间 围 绕 着 一 个 空 的 网 格 单元 。 
grid-template-areas: "top top Oht" 


ve 到 二 加 和 让 
"left bottom bottom"; 


当 你 构建 一 个 网 格 时 ,选择 一 种 舒适 的 语法 即 可 。 网 格 布 局 共 设 计 了 三 种 语法 : 编号 的 网 格 
线 、 命 名 的 网 格 线 、 命 名 的 网 格 区 域 。 最 后 一 个 可 能 更 受 广 大 开发 人 员 喜 爱 , 尤其 是 明确 知道 每 
个 网 格 元 素 的 位 置 时 ， 这 种 方式 用 起 来 更 舒服 。 


6.4 显 式 和 隐 式 网 格 


在 某 些 场景 下 ， 你 可 能 不 清楚 该 把 元 素 放 在 网 格 的 哪个 位 置 上 。 当 处 理 大 量 的 网 格 元 素 时 ， 
挨个 指定 元 素 的 位 置 未 免 太 不 方便 。 当 元 素 是 从 数据 库 获 取 时 ,元 素 的 个 数 可 能 是 未 知 的 。 在 这 
些 情 况 下 ， 以 一 种 宽松 的 方式 定义 网 格 可 能 更 合理 ， 剩 下 的 交 给 布局 算法 来 放置 网 格 元 素 。 

这 时 需要 用 到 隐 式 网 格 (implicit grid )。 使 用 grid-template-* 属性 定义 网 格 轨 道 时 ， 创 
建 的 是 显 式 网 格 (explicit grid )， 但 是 有 些 网 格 元 素 仍 然 可 以 放 在 显 式 轨道 外 面 ， 此 时 会 自动 创 
建 隐 式 轨 道 以 扩展 网 格 ， 从 而 包含 这 些 元 素 。 

图 6-11 里 的 网 格 只 在 每 个 方向 上 指定 了 一 个 网 格 轨道 。 当 把 网 格 元 素 放 在 第 二 个 轨道 ( 2 号 
和 3 号 网 格 线 之 间 ) 时 ， 就 会 自动 创建 轨道 来 包含 该 元 素 。 


| | 
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图 6-11 如 果 网 格 元 素 放 在 声明 的 网 格 轨 道 之 外 ， 就 会 创建 隐 式 轨道 ， 直 到 包含 该 元 素 


隐 式 网 格 轨道 默认 大 小 为 auto， 也 就 是 它们 会 扩展 到 能 容纳 网 格 元 又 内 容 。 可 以 给 网 格 容 
天 设置 grid-auto-columns 和 grid-auto-rows， 为 隐 式 网 格 轨道 指定 一 个 大 小 ( 比如 ， 





6.4 显 式 和 隐 式 网 格 141 
pante -ble el edb 二天 
说 明 在 指定 网 格 线 的 时 候 ， 隐 式 网 格 轨道 不 会 改变 负数 的 含义 。 负 的 网 格 线 编号 仍然 
是 从 显 式 网 格 的 右 下 开始 的 。 
接 下 来 用 隐 式 网 格 实现 男 一 个 网 页 布局 。 这 个 网 页 是 一 个 照片 墙 ， 如 图 6-12 所 示 。 在 


布局 中 ,将 设置 列 的 网 格 轨道 , 但 是 网 格 行 是 隐 式 创建 的 。 这 样 网 页 不 必 关 心照 片 的 数量 ， 
适应 任意 数量 的 网 格 元 素 。 只 要 照片 需要 换行 显示 ， 就 会 隐 式 创建 新 的 一 行 。 


人 








这 
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会 已 
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图 6-12 用 隐 式 网 格 行 布局 照片 的 网 格 


这 个 布局 很 有 意思 ， 因 为 它 用 Flexbox 或 者 浮动 很 难 实现 。 这 个 例子 充分 展示 了 网 格 特有 的 
能 力 O 

要 实现 上 述 布 局 , 需要 一 个 新 页 面 。 创建 一 个 空白 页 面 和 一 个 新 的 样式 表 ， 并 链接 它们 。 网 
页 的 标记 如 代码 清单 6-8 所 示 。 将 它 添加 到 网 页 中 。 


代码 清单 6-8 ”照片 墙 的 标记 
<div class="portfolio"> 
<figure class="featured"> 


每 个 <figure> 都 是 
<img src="limages/monkey.Jpbg" alt="monkey" /> 一 个 网 格 元 素 
<figcaption>Monkey</figcaption> 
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</figure> 


<figure> 
img src="images/eagle.jpg" alt="eagle" 人 = 
as 将 图 片 和 标题 封装 在 
<figcaption>Eagle</figcaption> ， 一 
<figure> 元 素 中 
</figure> 
<figure class="featured"> 
<img src="images/bird.jJpg" alt="bird" /> 
<figcaption>Bird</figcaption> 
</figure> featured 类 让 菏 些 
<figure> 图 片 更 大 


<img src="images/bear.jJpg" alt="bear" /> 
<figcaption>Bear</figcaption> 

</figure> 

<figure class="featured"> 
<img src="images/swan.jJpg" alt="swan" /> 
<figcaption>Swan</figcaption> 

</figure> 

<figure> 
<img src="images/elephants.jpg" alt="elephants" /> 
<figcaption>Elephants</figcaption> 

</figure> 

<figure> 
<img src="images/owl.jJpg" alt="owl" /> 
<figcaption>Owl</figcaption> 

</figure> 

</div> 


这 上 段 标记 包括 一 个 portfolio 元 系 〈 作 为 网 格 容 需 ) 以 及 一 系列 figure 元 硒 ( 网 格 元 系 )。 
个 figure 包含 一 张 图 片 和 一 个 标题 。 其 中 某 些 元 又 加 上 了 featured 类 , 之 后 会 让 这 些 元 系 比 其 
他 图 片 大 。 

我 会 分 几 个 阶段 介绍 该 布局 的 实现 过 程 。 首 先 , 创建 网 格 轨道 ,证 图 片 以 基础 网 格 形式 展现 
( 如 图 6-13 所 示 )。 之 后 ， 放 大 featured 图 片 ， 添 加 一 些 别 的 样式 完成 布局 。 
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图 6-13 ”基础 网 格 里 的 图 片 布局 
该 布局 的 样式 如 代码 清单 6-9 所 示 。 它 使 用 grigd-auto-rows 为 所 有 的 隐 式 网 格 行 指定 一 
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个 1 在 的 大 小 ， 每 一 行 拥 有 相同 的 高 度 。 该 布局 还 引入 了 两 个 新 概念 : auto-fill 和 minmax () 
国 数 ， 我 稍 后 会 解释 。 将 代码 清单 6-9 添加 到 样式 表 。 


代码 清单 6-9 ”拥有 隐 式 网 格 行 的 网 格 
body { 
background-color: #709b90; 
font-family: Helvetica, Arial, sans-serif; 


, M ES IC 人 CSD 
将 最 小 列 宽 设 置 


.Portfolio { 为 200px， 自 动 








真 

display: grid; 填充 网 格 

grid-template-columns: repeat (auto-fill, minmax(200px, 1fr)); OO— 

grid-auto-rows: 1fr; 
TD won 将 隐 式 水 平 网 格 轨道 

的 大 小 设置 为 1fr 
.Portfolio > figure { 
in: 0; A 
, Te 黎 盖 浏览 器 默认 
的 外 边 距 


.Portfolio img { 
max-width: 100%; 
} 


.Portfolio figcaption 1{ 
padding: 0.3em 0.8em; 
background-color: rgba(0, 0, 0, 0.5);} 
Color: #f£fff; 
text-align: right; 

} 


有 了 时候 我 们 不 想 给 一 个 网 格 轨 道 设置 固定 尺寸 , 但 是 又 和 希望 限制 它 的 最 小 值 和 最 大 值 。 这 
时 候 需 要 用 到 minmax () 图 数 。 它 指定 两 个 值 : 最 小 尺寸 和 最 大 尺寸 。 浏 览 需 会 确保 网 格 轨道 
的 大 小 介 于 这 两 者 之 间 。( 如 果 最 大 尺寸 小 于 最 小 尺寸 ， 最 大 尺寸 就 会 被 忽略 。) 通过 指定 
minmax(200Dx，1fr)， 浏 览 厦 确保 了 所 有 的 轨道 至 少 客 200px。 

repeat () 困 数 里 的 auto-fil1l 关键 字 是 一 个 特殊 值 。 设置 了 之 后 ,只 要 网 格 放 得 下 , 浏览 
希 就 会 尽 可 能 多 地 生成 轨道 ， 并 且 不 会 跟 指定 大 小 (minmax1() 值 ) 的 限制 产生 冲突 。 

auto-fill 和 minmax(200px，1fr) 加 在 一 起 ， 就 会 让 网 格 在 可 用 的 空间 内 尽 可 能 多 地 产 
生 网 格 列 ， 并 且 每 个 列 的 宽度 不 会 小 于 200px。 因 为 所 有 轨道 的 大 小 上 限 都 为 1fr ( 最 大 值 )， 所 
以 所 有 的 网 格 轨道 都 等 宽 。 

在 图 6-13 中 ， 视 口 能 容纳 四 个 200px 宽 的 列 ， 因 此 一 行 有 四 个 网 格 轨道 。 如 采 屏 硕 变 宽 ， 
就 能 放下 更 多 轨道 。 如 果 屏 茶 变 罕 ， 产 生 的 轨道 数 也 会 变 少 。 

如 果 网 格 元 素 不 够 填 满 所 有 网 格 轨 道 ，auto-fil11 就 会 导致 一 些 空 的 网 格 轨道 。 如 果 不 希 
望 出 现 空 的 网 格 轨道 ,可 以 使 用 auto-fit 关键 字 代 蔡 auto-fi11。 它 会 让 非 空 的 网 格 轨道 扩展 ， 
填 满 可 用 空间 。 访 问 Grid by Example 网 站 的 文 草 auto-fill vs. auto-fit 可 以 看 到 两 者 区 别 的 示例 。 
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具体 选择 auto-fi1ll 还 是 auto-fit 取决 于 你 是 想 要 确保 网 格 轨 道 的 大 小 ， 还 是 希望 整个 
网 格 容器 都 被 填 满 。 我 一 般 倾 向 于 auto-fit。 


6.4.1 添加 变化 


接 下 来 ,我 们 让 特定 图 片 (本 例 里 的 岛 、 天 鹅 等 ) 变 大 ,增加 一 些 视 觉 上 的 趣味 性 。 现 在 每 
个 网 格 元 系 都 占据 了 1x1 的 区 域 , 将 特定 图 片 的 尺寸 增加 到 2x2 的 网 格 区 域 。 可 以 用 featured 
类 选择 这 些 元 素 ， 让 它们 在 水 平和 垂直 方 辐 上 都 占据 两 个 网 格 轨道 。 

问题 来 了 ， 由 于 元 素 按 顺序 排列 ， 增 加 某 些 网 格 元 素 的 大 小 会 导致 网 格 中 出 现 空 日 区 域 ， 如 
图 6-14 所 示 。 驴 所 在 的 是 第 三 个 网 格 元 素 ， 但 是 因为 它 的 尺寸 较 大 ， 所 以 第 二 张 老 认 图 的 右 侧 
空间 容纳 不 下 它 。 因 此 ， 它 下 降 到 了 下 一 个 网 格 轨道 。 
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图 6-14 ”增加 一 些 网 格 元 系 的 大 小 会 导致 布 局 中 出 现 无 法 容纳 大 元 条 的 空 日 区 域 


当 不 指定 网 格 上 元 素 的 位 置 时 ， 元 系 会 按照 其 布局 算法 目 动 放置 。 黑 认 人 情况 下 ,布局 算法 会 
按 元 系 在 标记 中 的 顺序 将 其 逐 列 逐 行 摆 放 。 当 一 个 元 际 无 法 在 某 一 行 容 纳 〈 也 怠 是 说 该 元 素 占 据 
了 太 多 网 格 轨道 ) 时 ， 算 法 会 将 它 移动 到 下 一 行 ， 寻 找 足 够 大 的 空间 容纳 它 。 在 本 例 中 ， 马 被 挪 
到 了 第 二 行 ， 放 在 老 认 下面 。 

网 格 布局 模块 规范 提供 了 另 一 个 属性 grid-auto-flow， 它 可 以 控制 布局 算法 的 行为 。 它 
的 初始 值 是 row， 上 一 段 描 述 的 就 是 这 个 值 的 行为 。 如 有 果 值 为 column ， 它 就 会 将 元 素 优 先 放 在 
网 格 列 中 ， 只 有 当 一 列 填 满 了 ， 才 会 移动 到 下 一 行 。 

还 可 以 额外 加 一 个 关键 字 dense (比如 ，gridq-auto-flow: colum dense )。 它 让 算法 
紧凑 地 需 满 网 格 里 的 空 日 , 尽管 这 会 改变 某 些 网 格 元 素 的 顺序 。 加 上 这 个 关键 字 , 小 元 系 就 会 “ 回 
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填 ” 大 元 素 造成 的 空 昌 区域。 效 采 如 图 6-15 所 示 。 
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图 6-15 ”使 用 紧凑 的 auto-flow 选项 ， 小 网 格 元 系 会 回填 网 格 的 空白 区 域 


加 上 紧 竣 的 auto-flow 选项 aense， 人 小 网 格 元 素 会 填 满 大 的 元 系 造 成 的 空白 区 域 。 源 码 顺 序 
仍然 是 猴子 、 老 座 、 乌 、 能 ,但 是 能 被 挪 到 了 乌 之 前 ， 填 满 了 空 日 。 

将 代码 清单 6-10 添加 到 样式 表 。 它 放大 了 特定 图 片 ， 让 其 在 水 平和 找 下 方 呵 上 均 占据 两 个 
网 格 轨道 ， 并 且 使 用 了 紧凑 的 auto-flow。 


代码 清单 6-10 ”放大 特定 图 片 
.Portfolio { 
display: grid; 
grid-template-columns: repeat (auto-fill, minmax(200px, 1fr)); 





grid-auto-rows: 1fr; 
grid-gap: lem; 开启 紧凑 的 网 格 
grid-auto-flow: dense; 布局 算法 
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.portfolio .featureqd { 


0 将 特定 图 片 放大 ， 在 水 平和 垂直 
6 方向 上 各 占据 两 个 网 格 轨道 


} 


这 上 段 代码 使 用 了 grid-auto-flow: dense, 等 价 于 grid-auto-flow: row dense。o El 
面 的 写法 里 隐 含 了 row， 因 为 初始 值 束 是 row。) 然后 选择 特定 的 图 片 ， 将 其 设置 为 在 水 平和 垂 
百 方向 上 各 占据 两 个 网 格 轨道 。 注 意 ， 本 例 只 用 了 span 关键 字 ， 没 有 明确 地 将 任何 一 个 网 格 元 
素 放 到 有 某 个 网 格 轨道 上 。 这 样 布 局 算法 承 会 将 网 格 元 系 放 到 它 党 得 合适 的 地 方 。 

在 你 的 屏幕 上 看 到 的 效 采 可 能 跟 图 6-12 不 完全 一 致 ， 这 取决 于 视 口 的 大 小 。 因 为 这 里 用 
auto-fill 决定 垂 百 的 网 格 轨 意 的 数量 ， 所 以 大 屏幕 可 以 容纳 更 多 的 轨道 ， 小 屏幕 则 容纳 得 较 
少 。 我 鹤 图 的 时 候 视 口 宽 度 是 1000px， 有 四 个 网 格 轨道 。 调 整 浏 览 栖 宽度 到 不 同 的 大 小 ， 看 看 网 
格 目 动 生成 多 少 轨 道 来 填充 可 用 空间 。 

需要 注意 的 是 ， 紧 凑 的 auto-flow 方式 会 导致 元 素 出 现 的 顺序 跟 HTML 里 不 一 致 。 当 使 用 键 
( Tab 键 ) 或 者 使 用 以 源码 顺序 而 非 以 显示 顺序 为 准 的 屏 硕 阅读 如 来 浏览 网 页 时 ， 用 户 可 能 会 
































子 网 格 

网 格 有 一 个 限制 是 要 求 用 特定 的 DOM 结构 ， 也 就 是 说 ， 所 有 的 网 格 元 素 必 须 是 网 格 容器 
的 直接 子 节点 。 因 此 ， 不 能 将 深层 上 误 套 的 元 素 在 网 格 上 对 齐 。 

可 以 给 网 格 元 素 加 上 display: grid, 在 外 层 网 格 里 创建 一 个 内 部 网 格 ， 但 是 内 部 网 格 
的 元 素 不 一 定 会 跟 外 层 网 格 的 轨道 对 齐 。 一 个 网 格 里 的 子 元 素 的 大 小 也 不 能 影响 到 另 一 个 网 格 
的 网 格 轨道 大 小 。 

将 来 可 以 使 用 子 网 格 ( subgrid ) 来 解决 这 个 问题 。 通 过 给 一 个 网 格 元 素 设 置 display: 
subgria， 将 其 变 成 自己 的 内 部 网 格 容器 ， 网 格 轨道 跟 外 部 网 格 的 轨道 对 齐 。 不 幸 的 是 ， 这 个 
特性 还 没有 被 任何 浏览 器 实现 ， 因 此 它 被 推迟 到 网 格 规范 的 Level2 版 本 中 。 

这 个 特性 备 受 期 待 。 数 请 关注 。 


6.4.2 ”让 网 格 元 素 填 满 网 格 轨 把 


现在 你 已 经 实现 了 相当 复杂 的 布局 。 你 没有 做 很 多 工作 指定 每 个 元 系 的 精确 位 置 , 而 是 让 浏 
览 厅 计算。 

还 有 最 后 一 个 问题 : 较 大 的 图 片 没 有 完全 十 满 网 格 单元 ， 在 图 片 下 面 留 了 一 片 小 小 的 空白 。 
理想 情况 下 ， 每 个 元 素 的 顶部 和 诬 部 都 应 该 跟 同 一 网 格 轨道 上 的 元 素 对 齐 。 现 在 顶部 对 齐 了 , 诬 
部 却 没有 像 图 6-16 那样 对 章 。 
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Elephants 


多 余 的 空间 








图 6-16 图 片 没 有 完全 填 满 网 格 单 元 ， 留 下 了 多 余 的 空间 


接 下 来 修复 这 个 问题 。 回想 一 下 , 每 个 网 格 元 系 都 是 一 个 <figure>, 包含 了 两 个 子 元 条 一 一 
一 个 图 片 和 一 个 标题 ( 如 下 代码 所 示 )。 
<figure class="featured"> 
<img src="images/monkey.jpg" alt="monkey" /> 


<figcaption>Monkey</figcaption> 
</figure> 


默认 情况 下 ， 每 个 网 格 元 系 都 会 扩展 并 项 满 整个 网 格 区 域 ， 但 是 子 元 素 不 会 ,因此 网 格 区 域 
出 现 了 多 余 的 高 度 。 一 个 简单 的 解决 办 法 是 用 Flexbox。 在 代码 清单 6-11 里 , 设置 每 个 <Eigure> 
为 弹性 容 侣 ， 方 回 为 column, 元 素 会 从 上 到 下 垂下 排列 。 然 后 给 图 片 标签 加 上 flex-grow， 强 
制 拉 伸 图 片 填充 空 日 区 域 。 

但 是 拉 伸 图 片 并 不 可 取 ， 因 为 这 会 改变 图 厂 的 宽 高 比 ， 导 人 致 图 片 变 形 。 好 在 CSS 为 控制 这 
一 行为 提供 了 一 个 特殊 属性 object-fit。 默 认 情 况 下 ， 一 个 <img> 的 object-fit 属性 值 为 
fil11， 也 就 是 说 整个 图 片 会 缩放 ， 以 填 满 <img> 元 素 。 你 也 可 以 设置 其 他 值 改变 默认 行为 。 

比如 ，object-fit 属性 的 值 还 可 以 是 cover 和 contain (如 图 6-17 所 示 )。 这 些 值 告诉 
浏览 硕 ， 在 渔 染 盒子 里 改变 图 片 的 大 小 ， 但 是 不 要 让 图 片 变 形 。 

D cover: 扩展 图 片 ， 让 它 填 满 盒子 ( 导致 图 三 一 部 分 个 裁 胞 )。 

口 contain: 缩放 网 片 ， 让 它 完 整地 填充 盒子 〈 导 致 盒子 里 出 现 空白 )。 
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fi11 (默认 ) Cover contain 
图 6-17 使 用 object-fit 控制 图 片 在 盒子 内 演 染 的 方式 
这 里 有 两 个 概念 要 区 分 清楚 : 盒子 (由 <img> 元 素 的 宽 和 高 决定 ) 和 泻 染 的 图 片 。 默 认 情 况 
下 ,这 二 者 大 小 相等 。object-fit 属性 让 我 们 能 在 盒子 内 部 控制 泻 染 图 片 的 大 小 ， 同 时 保持 盒 
子 的 大 小 不 变 。 











图 厂 变 形 。 作 为 妥协 ， 图 片 的 边 绿 会 被 裁 挥 一 部 分 。 
最 终 效 果 如 图 6-18 所 示 。 有 关 这 个 属性 的 更 多 详细 信息 , 请 查看 css-tricks 网 站 的 文章 4 Quick 


Overiew of object-fit and object-position。 





Monkey 





Elephants 


图 6-18 ”所 有 的 图 片 现在 都 填 满 了 网 格 区 域 ， 并 且 完 美 对 齐 
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现在 所 有 图 片 和 标题 的 上 下 边缘 都 跟 网 格 轨道 对 齐 了 。 代 码 如 代码 清单 6-11 所 示 ， 将 其 添 
加 到 你 的 样式 表 。 
代码 清单 6-11 使 用 垂直 的 Flexbox， 拉 伸 图 片 ， 填 充 网 格 区 域 


.portfolio > figure f{ 








display: flex; 让 每 个 网 格 元 素 都 成 为 
flex-direction: column; 垂直 的 Flexbox 
margin: 0; 
} 
用 弹性 拉 伸 ， 让 图 片 填充 
-Portfollo img { 弹性 容器 的 可 用 空间 
flex: 1; 


不 被 拉 伸 而 是 裁 掉 边缘 ) 


照片 墙 大 功 告 成 。 所 有 元 条 都 整整 齐 齐 地 排列 在 网 格 里 , 浏览 大 决定 了 王 直 的 网 格 轨道 的 数 6 
量 和 大 小 。 我 们 还 用 紧凑 的 auto-flow 让 浏览 问 填 满 了 所 有 空白 区 域 。 


6.5 ”特性 查询 


现在 你 已 经 大 体 上 掌握 了 网 格 布局 , 你 可 能 会 问 : 难道 要 等 到 所 有 的 浏览 带 都 文 持 网 格 了 才 
能 使 用 它 吗 ? 不 。 只 要 你 想 用 , 现在 就 可 以 , 但 是 要 考虑 如 果 训 览 希 不 文 持 网 格 时 应 该 如 何 布局 ， 
并 给 出 回 退 的 样式 。 

CSS 最 近 添 加 了 一 个 叫 作 特性 查询 ( feature query ) 的 功能 ， 该 功能 有 助 于 解决 这 个 问题 ， 
如 下 代码 片段 所 示 。 


Qsupports (display: grid) f{ 


object-fit: cover; 
max-width: 100%; 让 泻 染 的 图 片 填充 盒子 并 且 
} 











} 

esupports 规则 后 面 跟着 一 个 小 括号 包围 的 声明 。 如 果 浏览 器 理解 这 个 声明 ( 在 本 例 中 ， 
浏览 器 支持 网 格 )， 它 就 会 使 用 大 括号 里 面 的 所 有 样式 规则 。 如 果 它 不 理解 小 括号 里 的 声明 ， 就 
不 会 使 用 这 些 样式 规则 。 

也 就 是 说 可 以 提供 一 份 样式 规则 , 它 使 用 较 旧 的 布局 技术 ， 比 如 浮动 。 这 些 样式 不 一 定 完美 
(需要 做 出 妥协 )， 但 是 能 实现 基本 的 布局 。 然 后 在 特性 查询 中 ， 用 网 格 补 全 剩 下 的 样式 。 

以 照片 墙 为 例 。 可 以 用 inline-block 元 素 给 旧版 的 浏览 器 提供 一 个 较 基础 的 布局 。 然 后 将 所 
有 网 格 布局 相关 的 代码 放 到 特性 查询 里 ， 不 支持 网 格 的 浏览 器 就 会 泻 染 成 图 6-19 所 示 的 样子 。 
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Elephants 








图 6-19 ”对 不 支持 网 格 的 浏览 种 ， 布 局 做 了 回 退 处 理 


这 个 布局 做 了 一 些 妥 协 : 特定 网 片 没 有 更 大 的 太 寸 ， 每 列 的 宽度 固定 为 300px， 而 不 是 拉 伸 
到 填 满 可 用 的 屏 算 宽度。 因为 figure 元 素 展 示 为 inline-block,， 所 以 会 正常 换行 , 而 且 当 屏 
幕 够 大 的 时 候 ， 一 行 就 能 放下 更 多 的 图 片 。 

将 你 的 样式 表 更 新 为 代码 清单 6-12 ( 包含 了 特性 查询 )。 


代码 清单 6-12 ”用 特性 查询 实现 渐进 增强 
.Dortfollo > figure 1{ 
display: inline-block; 使 用 inline-block 作为 回 
max-width: 300px; 退 的 布局 
margin: 0; 


} 














.Portfolio img f{ 
max-width: 100%; 
object-fit: cover; 


} 


.Portfolio figcaption { 
padding: 0.3em 0.8em; 
background-color: rgba(0, 0, 0, 0.5); 
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color: #fff; 
text-align: right; 
} 
特性 查询 是 否 
Qsupports (display: grid) f{ 文 持 网 格 
.portfolio { 
display: grid; 
grid-template-columns: repeat (auto-fill, minmax(200px, 1fr)); 
grid-auto-rows: 1fr; 


grid-gap: lem; 将 所 有 的 网 格 布局 样 
grid-auto-flow: dense; 式 放 在 特性 查询 里 


) 


.Portfolio > figure 1{ 
display: flex; 
flex-direction: column; 





max-width: initial; 
} 覆盖 回 退 样式 
.Portfolio img f{ 

flex: 1; 


} 


.portfolio .featured { 
grid-row: span 2; 
grid-column: span 2; 

} 

} 

回 退 代码 和 其 他 基础 样式 ( 比如 颜色 ) 放 在 了 特性 查询 外 面 ， 因 此 它们 始终 适用 。 如 采用 不 
文 持 网 格 的 浏览 妖 打 开 这 个 网 页 ， 就 会 看 到 如 图 6-19 所 示 的 回 退 布局 。 所 有 跟 网 格 相 关 的 布局 
样式 都 在 特性 查询 里 ， 只 有 当 浏 览 硕 文 持 网 格 时 它们 才 会 生效 。 

@supports 规则 可 以 用 来 查询 所 有 的 CSS 特性 。 比 如 ,用 esupports (display: flex) 
来 查询 是 否 文 持 Flexbox， 用 @supports (mix-blend-mode: overlay) 来 查询 是 否 支 持 混合 
模式 (参见 第 11 前 。 


警告 JE 不 支持 @supports 规则 。 它 忽略 了 特性 查询 里 的 任何 规则 ， 不 管 是 否 真 的 支 
持 该 特性 ,通常 情况 下 这 是 可 以 接受 的 ， 因为 让 旧版 的 浏览 器 演 染 回 退 布局 也 是 情理 之 
中 的 事情 。 


特性 查询 还 有 以 下 几 种 写法 。 

DD @supports not (<declaration>) 
的 样式 规则 。 

[endorte. (decLaratior) .Sr (xdeclarationy) 
要 有 一 个 文 持 就 使 用 里 面 的 样式 规则 。 

UD asupports (<declaration>) and (<qeclaration>) 一 查询 声明 里 的 两 个 特性 都 
文 持 才 使 用 里 面 的 样式 规则 。 





























只 有 当 不 文 持 查 询 声 明 里 的 特性 时 才 使 用 里 面 


查询 声明 里 的 两 个 特性 只 
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这 些 写 法 还 可 以 结合 起 来 查询 更 复杂 的 情况 。 关 键 字 or 适合 查询 种 浏览 帮 表 级 的 属性 ( 如 
下 声明 所 示 )。 

Qsupports (display: grid) or (display: -ms-grid) 

这 人 句 声 明 既 指定 了 文 持 非 前 缀 版 本 属性 的 浏览 硕 ,， 也 指定 了 要 求 用 -ms- 前 缀 的 旧版 Edge 浏 
览 融 。 需 要 注意 的 是 ， 旧 版 Edge 对 网 格 的 部 分 文 持 不 如 现代 浏览 硕 稳 健 。 在 旧版 Edge 中 用 特性 
查询 来 文 持 网 格 布局 ， 可 能 厅 烦 比 收 益 更 大 。 因 此 最 好 是 忽略 它 ， 让 旧版 Edge 泻 染 为 回 退 布局 。 








6.6 ”对 齐 


网 格 布局 模块 规范 里 的 对 齐 属 性 有 一 些 跟 Flexbox 相同 ， 还 有 一 些 是 新 属性 。 第 5 章 已 经 介 
绍 了 其 中 的 大 部 分 , 现在 我 们 看 看 如 何在 网 格 里 面 使 用 这 些 属性 。 如 采 我 们 想 要 对 网 格 布局 有 更 
多 的 控制 ， 这 些 属性 可 能 会 很 方便 。 

CSS 给 网 格 布 局 提供 了 三 个 调整 属性 : justify-content 、justify-items 、 
justify-self。 这 些 属性 控制 了 网 格 元 素 在 水 平方 向 上 的 位 置 。 我 是 这 样 记 的 : 就 像 在 文字 处 
理 需 里 调整 文字 位 置 ， 让 它们 在 水 平方 同上 分 布 。 

还 有 三 个 对 齐 属性 : align-content、align-items、align-self。 这 些 属性 控制 网 格 
元 素 在 垂直 方向 上 的 位 置 。 我 是 这 样 记 的 : 就 像 表 格 布局 里 的 vertical-align 属性 。 这 些 属 
性 如 图 6-20 所 示 。 




















justify-items 网 格 容器 网 格 区 域内 
align-items 的 所 有 元 素 


justify-self 网 格 元 素 网 格 区 域内 
align-self 的 单个 元 素 


justify-content 网 格 容 如 网 格 容器 内 
align-content 的 网 格 轨 道 





图 6-20 ”网 格 内 的 对 齐 属性 


可 以 用 JuUStify-content 和 al lgn-content 设置 网 格 容 釉 内 的 网 格 轨道 在 水 平方 加 和 年 
直方 向 上 的 位 置 ， 特 别 是 当 网 格 元 系 的 大 小 无 法 填 满 网 格 容 吕 时。 参考 以 下 代码 。 














Od. { 

display: grid; 

height: 1200px; 

grid-template-rows: repeat (4, 200px); 
} 


它 明 确 指定 了 网 格 容 需 的 高 度 为 1200px， 但 是 只 定义 了 高 800px 的 有 效 水 平 网 格 轨道 。 
align-content 属性 指定 了 网 格 轨道 如 何在 剩 下 的 400px 空间 内 分 布 。 它 可 以 设 为 以 下 值 。 
D start 一 一 将 网 格 轨道 放 到 网 格 容器 的 上 / 左 ( Flexbox 里 则 是 flex-start )。 
口 end 一 一 将 网 格 轨道 放 在 网 格 容 兹 的 下 / 右 ( Flexbox 里 则 是 flex-end )。 
将 网 格 轨 道 放 在 网 格 容 右 的 中 间 。 
将 网 格 轨 道 拉 伸 至 填 满 网 格 容 磊 。 
将 剩余 空间 平均 分 配 到 每 个 网 格 轨 道 之 间 (〈 它 能 禾 盖 任何 grid-gap 








LGenter 


而 肢 < 罗 全 = 区 en 











UD space-between 
值 )。 


D space-around 








将 空间 分 配 到 每 个 网 格 轨 道 之 间 ， 且 在 两 端 各 加 上 一 半 的 间距 。 

口 space-evenly 一 一 将 空间 分 配 到 每 个 网 格 轨道 之 间 ， 且 在 两 端 各 加 上 同等 大 小 的 间距 

(Flexbox 规范 不 文 持 )。 

想 了 解 更 多 调整 /对 齐 属 性 的 例子 ,请 访问 Gridby Example 网 站 。 这 个 网 站 非常 棒 ， 里 面 吉 括 
了 大 量 的 网 格 示例 ， 是 由 W3C 成 员 及 开发 人 员 Rachel Andrew 收集 的 。 

为 网 格 布局 的 内 容 非 常 多 , 所 以 我 所 介绍 的 都 是 网 格 里 面 必须 掌握 的 核心 概念 。 建议 你 对 
网 格 做 更 多 试验 。 网 格 有 很 多 种 组 合 方式 ， 无 法 在 一 章 穷 尽 ， 因 此 你 需要 挑战 一 下 自己 ,尝试 新 
事物 。 当 你 遇 到 一 个 有 趣 的 网 页 布局 时 ， 看 看 能 不 能 用 网 格 实现 它 。 






































6.7 总结 


口 网 格 特别 适合 做 网 页 整体 布局 ( 但 不 局 限于 此 )。 

口 网 格 可 以 与 Flexbox 配合 实现 完整 的 布局 系统 。 

口 可 以 根据 上 自己 的 喜好 和 特定 场景 ， 随 意 使 用 不 同 的 语法 ( 编号 的 网 格 线 、 命 名 的 网 格 线 、 
命名 的 网 格 区 域 )。 

口 可 以 用 auto-fil1/auto-fit 以 及 隐 式 网 格 , 对 大 量 或 者 数量 未 知 的 网 格 元 素 进 行 布 局 。 

口 可 以 用 特性 查询 实现 渐进 增强 。 

















定位 和 技 琶 上 下 文 





本 章 概要 

口 元 素 的 定位 类 型 : 固定 定位 、 相 对 定位 以 及 绝对 定位 
口 构建 模 态 框 和 下 拉 菜 单 

口 CSS 三 角形 

口 理解 z-index 和 层 色 上 下 文 

口 新 的 定位 类 型 : 粘性 定位 











前 几 半 已 介绍 了 好 几 种 控制 网 页 布局 的 方式 ， 包 括 表 格 显 示 、Flexbox 以 及 浮动 。 本 和 草 将 介 
绍 另 一 项 重要 的 技术 : position 属性 。 它 可 以 用 来 构建 下 拉 沫 单 、 模 态 框 以 及 现代 Web 应 用 程 
序 的 一 些 基 本 歼 末 。 

定位 可 能 变 得 很 复杂 。 许多 开发 人 员 对 它 只 有 粗略 的 理解 。 如 果 不 完 全 了 解 定 位 以 及 它 可 能 
审 来 的 后 东 ， 就 很 容易 给 目 己 挖 坑 。 有 时 候 你 可 能 会 把 错误 的 元 素 放 在 其 他 元 素 前 面 ， 要 解决 这 
个 问题 却 没 有 那么 简单 。 

当 看 完 各 种 类 型 的 定位 后 , 你 肯定 能 准确 地 理解 每 种 类 型 的 行为 。 另 外 本 章 会 介绍 层 登 上 下 
文 ， 它 属于 定位 的 一 个 隐藏 的 副作用 。 理 解 层 登 上 下 文 能 帮 你 避免 不 必要 的 有 驮 烦 ， 当 你 被 一 个 页 
面 布 局 统 进 去 了 ， 它 还 能 帮 你 找到 问题 的 突破 口 。 

position 属性 的 初始 值 是 static。 前 面 的 革 市 里 用 的 都 是 这 个 议 态 定位 。 如 果 把 它 改 成 
其 他 值 ， 我 们 就 说 元 素 就 被 定位 了 。 而 如 果 元 素 使 用 了 静态 定位 ， 那 么 就 说 它 未 被 定位 。 

前 面 几 半 介绍 的 布局 方法 是 用 各 种 操作 来 控制 文档 流 的 行为 。 定位 则 不 同 : 它 将 元 系 彻 抵 从 
文档 流 中 移 走 。 它 允许 你 将 元 素 放 在 屏 帮 的 任意 位 置 。 还 可 以 将 一 个 元 素 放 在 另 一 个 元 系 的 前 面 
或 后 面 ， 彼 此 重 辣 。 









































7.1 固定 定位 


固定 定位 不 如 其 他 定位 类 型 用 得 普 裔 , 但 它 是 最 好 理解 的 一 种 定位 类 型 ， 因 此 我 完 从 它 开始 
介绍 。 给 一 个 元 素 设 置 position: fixed 就 能 将 元 系 放 在 视 口 的 任意 位 置 。 这 需要 搭配 四 种 属 
性 一 起 使 用 : OG. TO 人 GE 和。 这 些 属性 的 值 决 定 了 固定 定位 的 元 了 系 与 浏览 大 视 








口 边缘 的 距离 。 比 如 ，top: 3em 表示 元 素 的 上 边缘 距离 视 口 顶部 3em。 

设置 这 四 个 值 还 隐 式 地 定义 了 元 素 的 宽 高 。 比 如 指定 leftt: 2em; right: 2em 表示 元 素 
的 左边 缘 距 离 视 口 左边 2em， 右 边 毕 距离 视 口 右边 2em。 因 此 元 素 的 宽度 等 于 视 口 总 宽度 减 去 
4em。top、bottom 和 视 口 高 度 也 是 这 样 的 关系 。 


7.1.1 用 固定 定位 创建 一 个 模 态 框 


我 们 要 用 这 些 属性 创建 一 个 如 图 7-1 所 示 的 模 态 框 。 该 模 态 框 会 在 网 页 内 容 前 弹出 来 ， 它 会 
挡住 网 页 内 容 ， 直 到 关闭 该 弹 窗 。 

通常 情况 下 ,模仿 框 用 于 要 求 用 户 阅 读 一 些 内 容 或 者 在 下 一 步 操作 之 前 输入 一 些 内 容 , 比如， 
氏 7-1 的 模 态 框 展示 了 一 个 表单 ， 用 户 可 以 注册 一 个 时 事 通讯 。 初 始 状态 下 用 display: none 
隐藏 弹 窗 ， 然 后 用 JavaScript 将 display 改 成 block 以 显示 弹 窗 。 








Wombat Newsletter 


Sign up for our monthly newsletter. No spam. We promise! 


Email address: 


| sam | 





图 7-1 一 个 模 态 框 盒子 


创建 一 个 新 的 页 面 ， 将 代码 清单 7-1 加 到 <bodqy> 元 素 中 。 这 段 代码 将 所 有 内 容 放 在 两 个 容 
锅 元 系 中 ， 同 时 用 一 个 <script> 标 签 放置 JavaScript 代码 提供 基础 功能 。 
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代码 清单 7-1 创建 一 个 模 态 框 盒子 
<header class="top-banner"> 


<div class="top-banner-inner"> 
<p>Fingd out what's going on at Wombat Coffee each 











Ne 
month. Sign up for our newsletter: 触发 弹 窗 
<button id="open">Sign up</button> 的 按钮 

</pP> 
</div> 

</header> 加 模 态 框 容器 

<div class="modal" id="modal"> 


gi 1 "modal-backdrop"></di 模 态 框 后 面 遮挡 网 页 
<QdlV CldaSS= ImoOCQaLL 一 DacC OD > 区 lV> 内 容 的 “ 莹 层 ” 


<div class="modal-body"> 
<button class="modal-close" id="close">close</button> 
<h2>Wombat Newsletter</h2> 模 态 框 内 容 
<p>Sign up for our monthly newsletter. No spam. 
We promise!</p> 








<form> 
<p> 
<label for="email">Email address:</label> 
<input type="text" name="email"/> 
</pP> 
<p><button type="submit">Submit</button></p> 
</form> 





</div> 
</div> 


<script type="text/javascript"> 














Var button = document .getElementById('open'); 
Var Close = document .getElementBylId('close'); 
Var modal = document .getElementById('modal'); 
button.addEventListener('click', function (event) f{ 
event .preventDefaultit); 当 用 户 点 击 Sign up 按 
modal .stvle digBlay = "blIock':; 钮 时 打开 模 态 框 





二 





close.addEventListener('click', function (event) { 
AVentr heevyYentDerauler ys 当 用 户 点 击 Close 按钮 
modal.style.display = 'none'; 时 关闭 模 态 框 





}); 


</script> 


代码 清单 7-1 里 的 第 一 个 元 素 是 项 部 条 。, 它 包含 了 触发 模 态 框 的 按钮 。 第 二 个 元 素 是 模 态 框 。 
它 包括 一 个 空 的 modal-pbackqrop ， 用 来 遮 住 页 面 剩 余部 分 ， 将 用 户 的 注意 力 集中 到 弹 窗 的 内 
容 。 弹 窗 内 容 在 modal-body 里 。 

CSS 如 代码 清单 7-2 所 示 ， 将 其 添加 到 你 的 样式 表 。 它 包含 了 顶部 条 和 模 态 框 的 样式 。 


代码 清单 7-2 添加 模 态 框 样式 
body { 
font-family: Helvetica, Arial, sans-serif.; 
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min-height: 200vh; < 一 

nargine 0 设置 网 页 高 度 ， 让 页 面 出 现 
滚动 条 〈 只 是 为 了 演示 ) 
button { 





padding: 0.5em 0.7em; 
border: lpx solid #8d8d8d; 
background-color: white; 
font-size: lem; 


.top-banner { 
padding: lem 0; 
background-color: #ffd698; 


.top-banner-inner { 
width: 80%; 
max-width: 1000px; 
margin: 0 auto; 


} 默认 隐藏 模 态 框 。 当 要 打开 模 
态 框 的 时 候 ，JavaScript 会 设 


.modal 0 
4 直 display: block 


display: none; < 一 








.modal-backdrop { 
position: fixed; 


当 打 开 模 态 框 时 ， 用 半 透 明 的 


top: 0; 了 
right: 0; 蒙 层 遮挡 网 页 剩余 内 容 
bottom: 0; 

left: 0; 


background-color: rgba(0, 0, 0, 0.5); 


.modal-body { 
position: fixed; 


topy Samy 给 模 态 框 的 
bottom: 3em; 主体 定位 
right: 20%; 

left: 20%; 


padding: 2em 3em; 
background-color: white; 
overflow: auto; 
} 允许 模 态 框 主体 
下 需要 时 滚动 
.modal-close { 
Cursor: pointer; 


} 


在 这 段 CSS 里 ， 我 们 使 用 了 两 次 固定 定位 。 第 一 次 是 modal-backdrop， 四 个 方向 都 设置 
为 0。 这 让 蒙 层 填 满 整个 视 口 。 它 还 有 一 个 背景 色 rgba(0，0，0，0.5) 。 这 个 颜色 符号 指定 
了 红 、 绿 、 蓝 的 值 均 为 0， 算出 来 是 黑色 。 第 四 个 值 是 “alpha” 通 道 ， 它 指定 透明 度 : 0 是 完全 
透明 ，1 是 完全 不 透明 。0.5 是 半 和 透明， 因此 该 元 素 下 面 所 有 的 网 页 内 容 就 会 变 暗 。 
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第 二 次 固定 定位 了 modal-body。 它 的 四 条 边 都 在 视 口内 : 顶 边 和 底 边 到 视 口 对 应 的 边缘 为 
3em， 左 边 和 右边 距离 视 口 对 应 的 边缘 为 20%。 因 为 它 的 背景 色 为 白色 ， 所 以 模 态 框 呈 现 为 一 个 
在 屏幕 居中 的 白色 盒子 。 虽 然 可 以 随意 滚动 网 页 ， 但 是 背景 和 模 态 框 主体 都 不 会 动 。 

打开 页 面 ， 我 们 看 到 屏幕 上 方 有 一 个 带 按钮 的 淡 黄 色 顶 部 条 。 点 击 按钮 打开 定位 的 模 态 框 。 
因为 是 固定 定位 ， 所 以 即使 滚动 页 面 ， 模 态 框 的 位 置 也 不 会 变 (为 了 演示 ， 我 们 特地 将 body 上 
的 min-heignht 值 设 得 很 大 ， 撑 出 了 滚动 条 )。 

点 击 模 态 框 顶 部 的 Close 按钮 ， 关 闭 弹 窗 。 这 个 按钮 现在 的 位 置 不 太 对 ， 我 们 稍 后 会 调整 它 
的 位 置 。 


7.1.2 ”控制 定位 元 素 的 大 小 


定位 一 个 元 系 时 ， 不 要 求 指 定 四 个 方 回 的 值 ， 可 以 只 指定 需要 的 方向 什 ， 然 后 用 wiatnh 和 / 
或 height 来 决定 它 的 大 小 也 可 以 让 元 系 本 刁 来 决定 大 小 。 请 看 如 下 声明 。 


position: fixed; 
top: lem; 

right: lem; 
width: 20% 


这 上段 代码 会 将 元 素 放 在 距离 视 口 顶部 和 右边 lem 的 位 置 ， 宽 度 为 视 口 宽度 的 20%。 它 省 略 
了 bottom 和 height 属性 , 元 系 的 高 度 由 目 身 的 内 容 决 是。 例如 ,这 可 以 用 于 将 一 个 导航 亲 单 
固定 到 屏幕 上 。 即 使 用 户 滚动 网 页 内 容 ， 该 元 素 的 位 置 也 不 会 改变 。 

因为 固定 元 素 从 文档 流 中 移 除 了 , 所 以 它 不 再 影响 页 面 其 他 元 系 的 位 置 。 别 的 元 系 会 跟随 正 
党 文档 流 , 就 像 固定 元 系 不 存在 一 样 。 也 就 是 说 它们 通 笛 会 在 固定 元 系 下 面 排列 , 视 党 上 被 诞 挡 。 
这 对 于 模 态 框 来 说 没 问 题 ， 因 为 我 们 希望 模 态 框 出 现在 最 前 面 的 中 间 位 置 ， 直 到 用 户 关 财 它 。 

而 对 于 其 他 固定 元 素 ， 比 如 侧 边 导航 栏 ， 就 需要 注意 不 要 让 其 他 内 容 出 现在 它 下 面 。 通 第 给 
其 他 内 容 加 一 个 外 边 距 就 能 解决 该 问题 ,比如 ,将 所 有 内 容 放 在 容 带 里 , 容 六 设置 right -margin: 
20s。 外 边 距 会 流 到 固定 元 素 下面 ， 内 容 就 不 会 跟 导 航 栏 重叠。 


7.2 绝对 定位 


固定 定位 让 元 素 相 对 视 口 定位 ,此 时 视 口 被 称 作 元 系 的 包含 块 containing block ). PR 月 left: 
2em 则 将 定位 元 系 的 左边 放 在 距 包 含 块 左 侧 2em 处 。 

绝对 定位 的 行为 也 是 如 此 ， 只 是 它 的 包含 块 不 一 样 。 绝 对 定位 不 是 相对 视 口 ， 而 是 相对 最 近 
的 祖先 定位 元 素 。 跟 固定 元 系 一 样 ， 属 性 top、right、bottom 和 left 决定 了 元 素 的 边缘 在 
包含 块 里 的 位 置 。 


7.2.1 让 Close 按 钮 绝对 定位 


为 了 演示 绝对 定位 ， 我 们 重新 设置 Close 按钮 的 位 置 ， 将 其 放 在 模 态 框 的 右上 角 ， 如 图 7-2 
所 未 。 
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图 7-2 ”Close 按钮 位 于 模 态 框 的 右上 和 角 


我 们 需要 将 Close 按钮 设置 为 绝对 定位 。 因 为 它 的 父 元 孙 modal-body 是 固定 定位 的 ， 所 以 
会 成 为 Close 按钮 的 包含 块 。 根 据 代 码 清单 7-3， 编 辑 按 钮 的 样式 。 


代码 清单 7-3 ”绝对 定位 的 Close 按钮 
.modal-close { 
position: absolute; 
top: 0.3em; 
right: 0.3em; 


padding: 0.3em; 
Cursor: pointer; 








这 段 代 三 将 按钮 放 在 距离 modal-body 顶部 0.3em、 右 侧 0.3em 的 位 置 。 通常 情况 下 ， 整 像 
本 例 一 样 ， 包 含 块 是 元 素 的 父 元 素 。 如 有 果 父 元 素 未 被 定位 ， 那 么 浏览 页 会 沿 着 DOM 树 往 上 找 它 
的 祖父 、 曾 祖父 ， 下 到 找到 一 个 定位 元 素 ， 用 它 作 为 包含 块 。 


说 明 ”如果 祖 先 元 素 都 没有 定位 ， 那 么 绝对 定位 的 元 素 会 基于 初始 包含 块 〈initial 
containing block ) 来 定位 。 初 始 包含 块 跟 视 口 一 样 大 ， 国 定 在 网 页 的 顶部 。 








7.2.2 ”定位 伪 元 素 


Close 按钮 已 经 定位 好 了 ， 只 是 过 于 简陋 。 对 于 这 种 Close 按钮 ， 用 户 通 常 期 望 看 到 一 个 类 
似 于 x 的 图 形 化 显示 ， 如 图 7-3 所 示 。 
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Email address: 


图 7-3 将 Close 按钮 改 成 x 
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你 可 能 首先 想到 将 按钮 里 的 文字 close 换 成 x， 但 是 这 会 导致 可 访问 性 的 问题 ， 辅助 的 屏幕 
阅读 器 会 读 按钮 里 的 文字 。 因 此 要 给 这 个 按钮 一 些 有 意义 的 提示 。 在 使 用 CSS 之 前 ，HTML 本 
身 必须 有 意义 。 

相反 ,你 可 以 用 CSS 隐藏 close， 并 显示 x。 总 共 需 要 两 步 。 首 先 将 按钮 的 文字 挤 到 外 面 ， 
并 隐藏 溢出 内 容 。 然 后 将 按钮 的 : :after 伪 元 素 的 content 属性 设置 为 x， 并 让 伪 元 素 绝对 定 
位 到 按钮 中 间 。 按 照 代码 清单 7-4 更 新 按钮 样式 。 


提示 “ 相 比 字母 X， 我 更 推荐 用 乘法 符号 的 Unicode 字符 。 它 更 对 称 ， 也 更 好 看 。HTML 
字符 gtimes; 可 以 显示 为 这 个 字符 ,但 在 CSS 的 content 属性 里 ， 必 须 写 成 转 义 的 
Unicode 数字 : \00D7。 


代码 清单 7-4 ”用 一 个 x 替换 Close 按钮 


.modal-close { 

















position: absolute; 
top: 0.3em; 

right: 0.3em; 
padding: 0.3em; 
Cursor: pointer; 


font-size: 2em; 让 按钮 变 成 一 个 


height: lem; 小 方形 
width: lem; 
text-indent: 10em; 
overflow: hidden; 让 元 素 里 的 文字 
border: 0; 浇 出 并 隐藏 
} 


.modal-close: :after { 
position: absolute; 
line-height: 0.5; 
top: 0.2em; 


Lee Oe 添加 Unicode 字符 U+00D7 
text= 1ndent: 0 (乘法 符号 ) 
content: "\00DY7",; 

} 


以 上 代码 清单 明确 指定 按钮 为 lem 大 小 的 方形 。text-indent 属性 将 文字 推 到 右边 ， 淤 出 
元 素 。 它 的 确切 值 不 重要 ， 只 要 大 于 按钮 宽度 即 可 。 由 于 text-indent 是 继承 属性 ， 需 要 在 伪 
类 元 素 选 择 顺 上 设 为 0， 因 此 x 便 不 会 缩 进 。 

伪 类 元 系 现 在 是 绝对 定位 。 因 为 它 表现 得 像 按 钮 的 子 元 素 一 样 , 所 以 定位 的 按钮 就 成 为 其 伪 
元 素 的 包含 块 。 设 置 一 个 较 小 的 1ine-height 让 伪 元 素 不 要 太 高 , 用 top 和 left 属性 让 它 在 
按钮 中 间 定 位 。 这 里 的 精确 信和 是 我 反复 试 出 来 的 ,建议 你 在 目 己 的 浏览 锅 开 发 者 工具 里 试 试 , 看 
看 它们 如 何 影响 定位 。 

绝对 定位 是 定位 类 型 里 的 重量 级 选手 。 它 经 常 跟 JavaScript 配合 ， 用 于 弹出 采 单 、 工 具 提 示 
以 及 消息 盒子 。 我 们 将 用 绝对 定位 来 构建 一 个 下 拉 荣 单 , 但 在 此 之 前 , 我 们 需要 先 看 看 它 的 搭档 : 
相对 定位 。 
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7.3 ”相对 定位 


相对 定位 可 能 是 最 不 被 理解 的 定位 类 型 。 当 第 一 次 给 元 素 加 上 position: relative 的 时 
候 ， 你 通 冰 看 不 到 页 面 上 有 任何 视觉 改变 。 相 对 定位 的 元 素 以 及 它 周 围 的 所 有 元 素 ， 都 还 保持 看 
原来 的 位 置 ( 尽管 你 可 能 会 看 到 某 些 元 系 跑 到 为 一 些 元 系 前 面 ， 我 后 面 会 解释 这 个 问题 )。 

如 果 加 上 top、right、bottom 和 left 属性 ， 元 素 就 会 从 原来 的 位 置 移 走 ， 但 是 不 会 改 

它 周 围 任何 元 素 的 位 置 。 如 图 7-4 所 示 ， 四 个 inline-block 元 录 ,给 第 二 个 元 素 加 上 三 个 额外 的 
下 本 站 本 和 人工 全 二 而 Jeltt: 2em, 将 其 从 初始 位 置 移 走 ， 但 是 其 他 元 素 
没有 受到 影响 。 它 们 还 是 围绕 着 外 移 走 元 双 的 初始 位 置 ， 跟 随 着 正常 的 文档 流 。 


图 7-4 使 用 相对 定位 将 第 二 个 元 素 移 走 


设置 top: lem 将 元 素 从 原来 的 项 部 边缘 癌 下 移动 了 1em; 设置 left: 2em 将 元 系 从 它 来 
的 左 侧 边缘 癌 右 移动 了 2em。 这 可 能 导致 元 系 跟 它 下 面 或 者 劳 边 的 元 素 重 登 。 在 定位 中 ,也 可 以 
使 用 负 值 ， 比如 bottom: -lem 也 可 以 像 top: lem 那样 将 元 又 癌 下 移动 lem, 


说 明 跟 固定 或 者 绝对 定位 不 一 样 ， 不 能 用 top、right、bottom 和 left 改变 相对 
定位 元 素 的 大 小 ,这 些 值 只 能 让 元 素 在 上 、 下 、 左 、 右 方向 移动 ,可 以 用 top 或 者 bottom， 
但 它们 不 能 一 起 用 ( bottom 会 被 忽略 )， 同 理 , 可 以 用 left 或 right, 但 它们 也 不 能 
一 起 用 ( right 会 被 忽略 )。 


有 时 可 以 用 这 些 属性 调整 相对 元 系 的 位 置 , 把 它 挤 到 某 个 位 置 , 但 这 只 是 相对 定位 的 一 个 冷 
门 用 法 ,更 常见 的 用 法 是 使 用 position: relative 给 它 里 面 的 绝对 定位 元 素 创 建 一 个 包含 块 。 
































7.3.1 创建 一 个 下 拉 菜 单 


接 下 来 我 们 用 相对 和 绝对 定位 创建 一 个 下 拉 荣 单 。 它 的 初始 状态 是 一 个 简单 的 矩形 ， 当 用 户 
鼠标 悬 停 到 上 面 时 ， 会 弹出 一 个 链接 列表 ， 如 图 7-5 所 示 。 














Main Menu = 


Home 


| >offee RF 


Brewers 








Specials 





About us 


图 7-5 下 拉 菜 单 
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代码 清单 7-5 是 该 菜单 的 标记 。 将 它 添加 到 HIML 中 ， 放 在 <aiv class="modal"> 的 结 
标签 </daiv> 后 面 。 这 段 代 码 包 含 了 一 个 容 需 元 系 ， 之 后 我 们 会 将 它 的 内 容 居 中 ， 并 让 它 跟 顶部 
条 的 内 容 对 齐 。 我 还 在 弹出 列表 下 面 放 了 一 个 <h1> 标 签 ， 以 展示 弹出 列表 如 何 出 现在 其 他 网 页 
内 容 前 面 。 


代码 清单 7-5” 诬 加 下 拉 沫 单 的 HTML 


<div class="container"> i 
下 拉 菜 单 的 
<nNnav> a be 
标签 始终 可 见 


<div class="dropdown-label">Main Menu</div> 








<div class="dropdown"> 














<div class="dropdown-menu"> 
<ul class="submenu"> 

















<1i><a href="/">Home</a></11i> 
ee 人 人 aiv 的 显示 和 隐藏 对 应 着 
< 1><a href="/brewers">Brewers</a></11> pa 
<1i><a href="/specials">Specials</a></11> 菜单 的 展开 和 收 起 
<1i><a href="/about">About us</a></11i> 
</ul> 
</div> 
</div> 


</nNnav> 


<hlil>Wombat Coffee Roasters</hi1> 
</div> 


下 拉 羔 单 容 侣 包含 两 个 子 元 系 : 一 个 始终 显示 的 灰色 矩形 标签 以 及 一 个 下 拉 采 蛙 。 下拉 及 单 
用 显示 和 隐藏 表示 沫 单 展 开 和 收 起 。 因 为 它 会 是 绝对 定位 的 , 所 以 当下 拉 有 六 单 显示 时 不 会 改变 网 
页 的 布局 ， 这 意味 着 它 显示 时 会 出 现在 其 他 内 容 前 面 。 

接 下 来 ,给 下 拉 沫 单 容 胡 加 上 相对 定位 。 这 样 会 给 绝对 定位 的 沫 单 创 建 一 个 包含 块 。 将 代码 
清单 7-6 添加 到 样式 表 。 


代码 清单 7-6 ”鼠标 悬 俘 时 打开 下 拉 荣 单 
.container { 
width: 80%; 
max-width: 1000px; 
margin: lem auto 


} 

















.dropdown { 
display: inline-block; 创建 包含 块 
position: relative; 坟 


.dropdown-label { 
padding: .5em 1.5em; 
border: lpx solid #ccc; 
background-color: #eee; 


lL 
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人 { 最 初 隐藏 菜单 


display: none; 

position: absolute; 

Left: “O's 

top: 2.1em; 

min-width: 100%; 

background-color: #eee; 
} 


.dropdown:hover .dropdown-menu { | 


将 菜单 移动 到 下 拉 
菜单 下 面 


鼠标 悬 停 时 
显示 菜单 


display: block; 
} 


.Submenu { 
padding-left: 0; 
margin: 0; 
list-style-type: none; 
border: lpx solid #999; 


.Submenu > 1i + 11 { 
border-top: lpx soliqd #999; 
} 


.Submenu > ]1 >at{ 
display: block; 
padding: .5em 1.5em; 
background-color: t#eee; 
COolor: #369;，; 
text-decoration: none; 


.Submenu > 11 > a:hover { 
background-color: #fff; 
} 


当 移 动 鼠 标 指 针 到 主 菜 单 标签 时 ， 下 拉 沫 单 就 会 从 下 面 弹出 。 请 注意 , 这 里 是 在 整个 容 姑 上 
设置 :hovez 状态 来 打开 沫 单 。 也 台 是 说 只 要 姑 标 停 在 它 的 任何 内 容 上 ,无 论 是 aropdown-lapel 
还 是 sropdown-menu， 沫 单 都 会 保持 打开 状态 。 

绝对 定位 的 dropdown-menu 设置 了 lett: 0， 让 其 左边 和 整个 容器 的 左 侧 对 齐 。 然 后 它 
使 用 top: 2.1enm 将 其 项 部 边缘 放 在 标签 下 面 边 距 和 边框 , 标签 高 2.1em )。min-wiath 
为 100%， 保 证 它 至 少 等 于 容 带 的 宽度 ( 容 右 冤 度 由 dropdown-label 决定 )。 之 后 用 submenu 
类 给 下 来 采 单 内 的 菜单 加 上 样式 。( 如 果 现 在 打开 檬 人 态 框 ， 你 就 会 发 现 它 以 一 种 奇怪 的 方式 位 于 
下 拉 沫 单 后 面 。 没 关系 ， 我 们 很 快 就 会 解决 这 个 问题 。) 























使 用 下 拉 菜 单 的 几 个 重点 
简单 起 见 ， 代 码 清 单 7-6 的 例子 在 用 户 和 鼠标 悬 停 的 时 候 用 了 一 个 :hovet 伪 类 打开 菜单 。 
这 个 例子 不 完整 。 通 常情 况 下 ， 更 稳健 的 方式 是 使 用 JavaScript 添加 和 移 菜单 开关 
的 类 名 。 这样 就 能 在 打开 和 关闭 菜单 之 前 添加 适当 的 延 记 ,防止 用 户 在 鼠标 快速 滑 过 时 无 意 间 





a- 
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触发 :hover。 

另外 ,虽然 这 个 例子 用 鼠标 能 正常 生效 , 但 在 触 屏 设备 上 会 无 效 ( 只 有 一 部 分 触 屏 设备 会 
在 轻 触 的 时 候 触 发 :nover 状态 )， 该 例子 也 没有 解决 用 屏幕 阅读 器 或 者 用 键盘 切换 时 的 可 访 
问 性 问题 。 更 严谨 的 做 法 是 增强 下 拉 菜 单 的 功能 ， 确 保 能 用 触 屏 控制 ， 并 且 当 用 户 使 用 Tab 
键 切 换 菜 单项 的 时 候 保持 菜单 打开 。 

实现 这 些 功能 的 JavaScript 代码 不 在 本 书 的 讨论 范围 内 , 但 是 如 果 你 很 擅长 JavaScript, 就 
可 以 写 代 码 解 决 以 上 问题 。 你 也 可 以 借助 实现 了 下 拉 功 能 的 第 三 方 库 ， 然 后 用 CSS 来 定制 菜 
单 的 样式 。 


7.3.2 创建 一 个 CSS 三 角形 


下 拉 这 单 距 离 完 美 还 差 一 步 。 现在 它 已 能 正常 工作 , 但 用 户 无 法 一 眼 察 党 到 主 荣 单 标签 下 面 
还 有 更 多 内 容 。 我 们 来 给 标签 加 上 一 个 小 的 回 下 策 头 ， 告 诉 用 户 还 有 更 多 内 容 。 

我 们 可 以 用 边框 男 一 个 三 角形 当 作 辐 下 区 头 。 这 里 用 标签 的 : :after 伪 元 素来 画 三 角形 ， 
然后 使 用 绝对 定位 将 它 放 到 标签 的 右边 。 

大 多 数 情 况 下 ， 我 们 会 给 一 个 元 素 加 上 较 细 的 边框 ,通常 1px 或 者 2px 就 够 了 了, 但 如 果 把 边 
框 变 得 像 图 7-6 那样 粗 呢 ? 图 中 给 每 条 边 都 加 了 独特 的 颜色 ， 用 来 标 出 每 条 边 的 起 始 位 置 。 




















图 7-6 “市 粗 边 框 的 元 素 


注意 观察 角 上 两 条 边 的 边 绿 接触 的 地 方 : 它们 形成 了 一 个 对 角 边 。 再 观察 一 下 将 元 素 的 宽 和 
高 缩小 到 0 时 会 发 生 什么 《如 图 7-7 所 示 ) 所 有 的 边 午 汇聚 到 一 起 最 后 在 中 间 连 接 起 来 了 。 











图 7-7 元素 没 有 宽 和 高 时 ， 每 条 边 都 变 成 了 一 个 三 角形 
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元 系 四 周 的 边 孝 变 成 了 三 角形 。 顶 部 的 边 祷 尖 指 癌 下 边 ， 右边 的 边 指 癌 左边 ， 以 此 类 推 。 基 
于 这 个 现象 ,可 以 用 一 条 边 作为 三 角形 ,然后 将 剩 下 的 边 设置 为 透明 。 元 系 的 左右 边 都 透明 ， 而 
顶部 边 可 见 ， 就 会 如 图 7-8 所 示 ， 形 成 一 个 简单 的 三 角形 。 





图 7-8 用 元 系 的 上 边框 做 的 三 角形 


我 们 给 aropaown-label: :after 伪 元 素 加 上 样式 ， 做 一 个 三 角形 ， 并 让 它 绝对 定位 。 将 
代码 清单 7-7 添加 到 样式 表 。 


代码 清单 7-7 在 下 拉 标 签 里 绝对 定位 一 个 三 角形 


.dropdown-label { 





padding: 0.5em 2em 0.5em 1.5em; 
borders lpx goligd #660; 增加 右 侧 内 边 距 , 给 衙 
background-color: #eee; 头 留 出 空间 


} 


.dropdown-label::after { 


Content: ™" 

position: absolute; 

right: lem; 在 标签 的 右边 
top: lem; 定位 元 素 





Leenas = 二 用 上 边框 做 一 个 向 


border-color: black transparent transparent.; 


, 下 的 箭头 

.dropdown:hover .dropdown-label: :after { yg ee 
top: 0.7em; 鼠标 悬 停 时 ， 让 区 
border-color: transparent transparent black; 头 品 上 


} 

伪 元 双 因 为 没有 内 容 ， 所 以 没 腕 或 高 。 人 然后 用 border-color 简写 属性 设置 上 边框 为 黑 
色 ， 左右 和 下 面 的 边框 为 透明 ， 构造 一 个 癌 下 的 箭头 。 dropdown-label 右边 用 内 边 距 留 出 了 
空间 ， 用 来 放 三 角形 。 最 后 的 效果 如 图 7-9 所 示 。 





Main Menu ~ 
图 7-9 ”和 带 癌 下 箭头 的 下 拉 羔 单 标签 
打开 沫 单 , 季 涉 方 同 反 转 , 绷 癌 上 面 , 表示 有 末 单 可 以 被 关闭 ,微调 top 信 ( 从 lem 到 0.7em )， 
让 向 上 的 箭头 看 起 来 跟 回 下 的 盘 头 处 于 相同 的 位 置 。 


羽 外 你 也 可 以 用 一 个 图 片 或 者 育 景 图 来 实现 箭头 ， 但 是 用 短 短 几 行 CSS 代码 就 可 以 为 用 户 
免 去 不 必要 的 网 络 请 求 。 加 上 这 个 小 小 的 箭头 ， 能 给 网 站 或 应 用 程序 增色 不 少 。 
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这 项 技术 还 可 以 用 来 构建 其 他 复杂 形状 ， 比 如 梯形 、 六 边 形 和 星 形 。 查 看 用 CSS 构建 的 各 
种 形状 ， 可 以 访问 css-tricks 网 站 上 的 文章 The Shapes of CSS。 


7.4 层 芭 上 下 文 和 z-index 


定位 非常 有 用 , 但 也 需要 弄 清楚 它 会 市 来 什么 后 琳 。 当 把 一 个 元 系 从 文档 流 中 移 除 时 ， 我们 
就 需要 管理 之 前 由 文档 流 处 理 的 所 有 事情 了 。 

首 抑 要 确保 元 素 不 会 不 小 心 跑 到 浏览 硕 视 口 之 外 , 导致 用 户 会 看 不 到 元 系 。 其 次 要 保证 元 系 
不 会 不 小 心 挡住 重要 内 容 。 

最 后 还 有 层 县 的 问题 。 在 同一 页 面 定 位 多 个 元 系 时 , 可 能 会 遇 到 两 个 不 同 定位 的 元 素 重 又 的 
现象 。 有 时 我 们 会 发 现 “ 错 误 ” 的 元 素 出 现在 其 他 元 系 之 前 。 事 实 上 ,本 章 已 经 故意 设置 了 这 样 
的 场景 来 演示 这 个 问题 。 

在 前 面 构建 的 网 页 里 ， 通 过 点 击 网 页 头 部 的 Sign up 按钮 打开 模 态 框 。 如 果 在 HTML 里 下 拉 
菜单 的 标记 位 于 模 态 框 之 后 , 页 面 看 起 来 就 如 图 7-10 所 示 。 注意 下 拉 菜 单 现在 出 现在 模 态 框 前 面 。 

















Wombat Newsletter 
Main Menu ~ 


Sign up for our monthly newsletter. No spam. We promisel 


Won Email address: 


Submit 





图 7-10 模 态 框 错误 地 出 现在 下 拉 菜 单 下 面 


有 很 多 方法 可 以 解决 这 个 问题 。 在 此 之 前 ,要 了 解 浏 览 带 如 何 决 定 元 系 层 车 顺序 ， 首先 需要 
知道 浏览 瘟 是 如 何 演 染 页 面 的 。 


7.4.1 ”理解 泻 染 过 程 和 层 色 顺序 


浏览 絮 将 HTML 解析 为 DOM 的 同时 还 创建 了 另 一 个 树 形 结构 ， 叫 作 泻 染 树 ( render tree )。 
它 代 表 了 每 个 元 素 的 视觉 样式 和 位 置 。 同 时 还 决定 浏 览 硕 绘制 元 素 的 顺序 。 顺 序 很 重要 ， 因 为 如 
果 元 系 刚 好 重 辣 ， 后 绘制 的 元 系 就 会 出 现在 先 绘制 的 元 系 前 面 。 

通常 情况 下 (使 用 定位 之 前 )， 元 素 在 HTML 里 出 现 的 顺序 决定 了 绘制 的 顺序 。 考 虑 以 下 代 
但 里 的 三 个 元 系 : 

















<div>one</div> 
<div>two</div> 
<div>three</div> 
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它们 的 层 侍 行为 如 图 7-11 所 示 。 这 里 使 用 了 负 的 外 边 距 让 元 条 重合 ,但 并 未 使 用 任何 定位 。 
后 出 现在 标记 里 的 元 系 会 绘制 在 完 出 现 的 元 系 前 面 。 





图 7-11 三 个 元 素 正 常 层 著 : HTML 里 面 后 出 现 的 元 素 在 先 出 现 的 元 素 前 面 


定位 元 厅 时 ,这 种 行为 会 改变 。 浏 览 如 会 完 绘制 所 有 非 定 位 的 元 素 ， 然后 绘制 定位 元 系 。 默 
认 人 情况 下 ， 所 有 的 定位 元 和 素 会 出 现在 非 定位 元 素 前 面 。 如 图 7-12 所 示 ， 给 前 两 个 元 素 加 了 
poslELon: relative, 它 们 就 绘制 到 了 前 面 , 黎 盖 了 静态 定位 的 第 三 个 元 系 ,尽管 元 素 在 HTML 
里 的 顺序 并 未 改变 。 

注 硬 ,在 定位 元 素 里 , 第 二 个 定位 元 素 还 是 出 现在 第 一 个 定位 元 素 前 面 。 定 位 元 素 会 被 放 到 
前 面 ， 但 是 基于 源码 的 层 登 关系 并 没有 改变 。 








图 7-12 ”定位 元 素 绘制 在 静态 元 素 之 前 


也 就 是 说 在 上 述 网 页 里 ， 模 态 框 和 下 拉 羔 单 都 会 出 现在 静态 内 容 之 前 ( 符合 预期 )， 但 是 源 
码 里 后 出 现 的 元 了 会 绘制 在 先 出 现 的 元 条 之 前 。 解 决 这 个 问题 的 一 个 办 法 是 在 源码 里 将 <div 
class="modal"> 及 其 内 容 移 到 下 拉 采 单 后 面 。 

通常 情况 下 , 模 态 框 要 放 在 网 页 内 容 的 最 后 ，</body> 关 闭 标签 之 前 。 大 多 数 构建 模 态 框 的 
JavaScript 库 会 自动 这 样 做 。 因 为 模 态 框 使 用 固定 定位 ， 所 以 不 必 关 心 它 的 标记 出 现在 哪里 ， 它 
会 一 直 定 位 到 屏幕 中 间 。 
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改变 固定 定位 元 素 的 标记 位 置 不 会 产生 不 好 的 影响 ， 但 是 对 相对 定位 或 绝对 定位 的 元 系 来 
说 ,通常 无 法 用 改变 标记 位 置 的 方法 解决 层 盖 问题 。 相 对 定位 依赖 于 文档 流 ， 绝对 定位 元 系 依赖 
于 它 的 定位 祖先 节点 。 这 时 候 需 要 用 z-index 属性 来 控制 它们 的 层 革 行为 。 

















7.4.2 用 z-index 控制 层 芭 顺序 


z-index 属性 的 值 可 以 是 任意 整数 ( 正 负 部 行 )。z 表示 的 是 笛 卡 儿 x-y-z 坐标 系 里 的 深度 方 
可 。 拥 有 较 高 z-index 的 元 素 出 现在 拥有 较 低 z-index 的 元 素 前 面 。 拥 有 负数 z-index 的 元 
素 出 现在 静态 元 素 后 面 。 

使 用 z-index 是 解决 网 页 层 著 问题 的 第 二 个 方法 。 该 方法 不 要 求 修改 HTML 的 结构 。 将 
modal-backdrop 的 z-index 设置 为 1, 将 modal-body 的 z-index 设置 为 2 (确保 模 态 框 
的 主体 在 蒙 层 前 面 )。 按 照 代码 清单 7-8 更 新 样式 表 。 


代码 清单 7-8 ”给 模 态 框 加 上 z-lndex, 使 其 出 现在 下 拉 菜 单 之 前 
.modal-backdrop { 
position: fixed; 
COBS .Qs 
i 0 
Bottom: 0; 
小 全 下 已 守 0 
background-color: rgba(0, 0, 0, 0.5);} 




















z-index: 1; 
} A -HH Es ~ \ 几 ce 
将 模 态 框 的 蒙 层 拉 到 没有 设置 


-modal-body { z-index 的 元 素 前 面 


position: fixed; 
top: 3em; 

bottom: 3em; 
ight: 20%: 

left: 20%; 
padding: 2em 3em; 


background-color: white; 
J 夕 英 太 王 ~ 
overflow: auto; 将 模 态 框 主体 


拉 到 蒙 层 前 面 





Z-jndex: 


} 


z-index 的 行为 很 好 理解 ， 但 是 使 用 它 时 要 注意 两 个 小 陷阱 。 第 一 ，z-indqex 只 在 定位 元 
率 上 和 后 效 , 不 能 用 它 控制 静态 元 兹 。 第 二 ， 给 一 个 定位 元 素 加 上 z-index 可 以 创建 层 琶 上 下 文 。 








7.4.3 理解 层 于 上 人 下文 


一 个 层 双 上下文 包含 一 个 元 系 或 者 由 浏览 带 一 起 绘制 的 一 组 元 系 。 其 中 一 个 元 系 会 作为 层 芋 
上 下 文 的 根 ， 比 如 给 一 个 定位 元 素 加 上 z-index 的 时 候 , 它 就 变 成 了 一 个 新 的 层 疼 上 下 文 的 根 。 
所 有 后 代 元 素 就 是 这 个 层 琶 上 下 文 的 一 部 分 。 

不 要 将 层 合 上 下 文 跟 第 4 草 的 BFC 弄 混 了 ， 它 们 是 两 个 独立 的 概念 ， 尺 管 不 一 定 互 不 。 层 




















7.4 层 合 上下文 和 z-index 169 


营 上 下 文人 负责 决定 哪些 元 素 出 现在 为 一 些 元 素 前 面 ， 而 BFC 负责 处 理 文档 流 ， 以 及 元 系 是 否 会 
午 蕉 。 

实际 上 将 层 琶 上 下 文 里 的 所 有 元 素 一 起 绘制 会 造成 严重 的 后 琳 : 层 合 上 下 文 之 外 的 元 系 无 法 
合 放 在 层 合 上 下 文 内 的 两 个 元 系 之 间 。 换 句 话 说 ， 如 末 一 个 元 系 登 放 在 一 个 层 合 上 下 文 前 面 , 那 
么 层 共 上下文 里 没有 元 系 可 以 被 拉 到 该 元 素 前 面 。 同 理 ， 如 末 一 个 元 系 被 放 在 层 合 上 下 文 后 面 ， 
层 登 上 下 文 里 没有 元 系 能 出 现在 该 元 素 后 面 。 

这 么 说 比较 绕 , 下 面 用 一 个 例子 来 演示 。 新建 一 个 HTML 页 面 , 添加 代码 清单 7-9 里 的 标记 。 


代码 清单 7-9 层 且 上 下 文 的 例子 
<div class="box one positioned"> 
one 
<div class="absolute">nested</div> 
</div> 
<div class="box two positioned">two</div> 
<div class="box three">three</div> 


这 上 段 代码 包含 了 三 个 例子， 其 中 两 个 被 定位 ， 并 有 日 z-index 为 1， 第 一 个 盒子 里 面 有 一 个 
绝对 定位 的 元 素 ， 它 的 z-index 为 100。 虽 然 第 一 个 盒子 的 z-index 很 高 ， 但 还 是 出 现在 第 二 
个 盒子 后 面 ， 因 为 它 的 父 元 了 系 ， 即 第 一 个 盒子 形成 的 层 登 上 下 文 在 第 二 个 盒子 后 面 (如 图 7-13 
所 示 )。 





人 一 





图 7-13 ”整个 层 琶 上 下 文 相对 于 页 面 上 其 他 元 素 琶 放 
代码 清单 7-10 是 这 个 场景 的 样式 ， 将 其 添加 到 网 页 里 。 这 里 面 大 部 分 代码 是 给 盒子 添加 大 
小 和 颜色 ,以 便 看 清 层 羞 顺 序 。 男 外 用 人 负 的 外 边 距 让 元 素 重 车 。 而 最 核心 的 代码 是 给 每 个 元 素 加 
上 position 和 z-index。 
代码 清单 7-10 ”创建 层 儿 上 下 文 
body { 


margin: 40px; 


} 


.box { 





并 
Hi 
上 
- 
a 
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display: inline-block; 
width: 200px; 
line-height: 200px; 
text-align: center; 
border: 2px solid black; 
background-color: #eaD; 
margin-left: -60px; 
vertical-align: top; 


.one { margin-left: 0; } 
.two { margin-top: 30px; } 
.three { margin-top: 60px; } 


.positioneqd { 
position: relative; 


backoground-eol0r: #5ae: 每 个 定位 的 盒子 都 创建 了 一 个 层 
z-index: 1; 王 上 下 文 ，z-index 为 1 


} 


.absolute { 
position: absolute; 
top: lem; 
right: lem; 
height: 2em; 


backoground- OloOry $FfE; z-index 只 控制 元 素 在 它 所 处 层 
border: 2px dashed #888; 全 上 下 文 内 的 层 准 顺 序 


z-index: 100; 
line-height: initial; 
padding: lem; 

} 


合 放 在 第 二 个 盒子 后 面 的 第 一 个 盒子 是 一 个 层 合 上 下 文 的 根 。 因 此 ,里 然 它 的 z-index 值 
很 高 ， 但 是 它 内 部 的 绝对 定位 元 素 不 会 跑 到 第 二 个 盒子 前 面 。 在 浏览 硕 开 发 者 工具 里 试验 一 下 ， 
感受 这 种 关系 ， 改 变 每 个 元 素 的 z-index 看 看 会 发 生 什 么 。 


说 明 ”给 一 个 定位 元 素 加 上 z-index 是 创建 层 登 上 下 文 最 主要 的 方式 ， 但 还 有 别 的 必 
性 也 能 创建 ， 比 如 小 于 1 的 opacity 属性 ， 还 有 transform、filter 属性 。 由 于 这 
些 属 性 主要 会 影响 元 素 及 其 子 元 素 泻 染 的 方式 ， 因 此 一 起 绘制 父子 元 素 。 文 档 根 节点 
(<html> ) 也 会 给 整个 页 面 创建 一 个 顶级 的 层 常 上下文。 


所 有 层 登 上 下 文 内 的 元 素 会 按照 以 下 顺序 ， 从 后 到 前 登 放 : 
口 层 登 上 下 文 的 根 

口 z-index 为 负 的 定位 元 素 〈 及 其 子 元 素 ) 

口 非 定 位 元 素 

口 z-index 为 auto 的 定位 元 系 ( 及 其 子 元 系 ) 

口 z-index 为 正 的 定位 元 素 〈 及 其 子 元 素 ) 
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变量 记录 z-index 
如 果 不 根 据 组 件 的 优先 级 定义 清晰 的 层 胎 顺序， 那么 一 个 样式 表 很 容易 演变 成 一 场 
z-index 大 战 。 如 果 没 有 清晰 的 说 明 ， 开 发 人 员 在 给 一 个 模 态 框 之 类 的 元 素 添 加 样式 时 ， 为 
了 不 被 其 他 元 素 遮 挡 ， 就 会 设置 一 个 高 得 离谱 的 z-index， 比 如 999 999。 这样 的 事情 重复 几 
次 后 ， 大 家 就 只 能 赁 感觉 给 一 个 新 的 组 件 设置 z-index。 
如 果 你 使 用 预 处 理 器 ， 比 如 LESS 或 SASS (参见 附录 B )， 或 者 你 支持 的 所 有 浏览 器 都 支 
持 自 定义 属性 (参见 第 2 齐 )， 就 能 很 方便 地 处 理 这 个 问题 。 将 所 有 的 z-index 都 定义 为 变量 
放 到 同一 个 地 方 ， 如 下 代码 片段 所 示 。 这 样 就 能 清晰 地 看 到 哪些 元 素 在 前 哪些 元 素 在 后 。 


2 oadinneo mdieaeor. 100.; 


== 史 nV -Meny: 200; 
== 史 =CEODCOWN menus BOIOF; 
nl el 400; 
ll le: A 


将 增 量 设 为 10 或 者 100， 这 样 就 能 在 需要 的 时 候 往 中 间 插 入 新 值 。 





如 果 发 现 z-index 没有 按照 预期 表现 ， 就 在 DOM 树 里 往 上 找到 元 素 的 祖先 节点 ， 直 到 发 
现 层 全 上 下 文 的 根 。 然 后 给 它 设置 z-ignex， 将 整个 层 合 上 下 文 同 前 或 者 疝 后 放 。 还 要 注意 多 
个 层 琶 上 下 文通 套 的 情况 。 

网 页 很 复杂 时 , 很 难 判 断 是 哪个 层 琶 上 下 文 导 人 致 的 问题 。 因 此 ,在 创建 层 全 上下文 的 时 候 就 
一 定 要 多 加 小 心 , 没有 特殊 理由 的 话 不 要 随意 创建 , 尤其 是 当 一 个 元 系 包 含 了 网 页 很 大 一 部 分 内 
容 的 时 候 。 尽 可 能 将 独立 的 定位 元 系 〈 比如 模 态 框 ) 放 到 DOM 的 顶层 , 结束 标签 </body> 之 前 ， 
这 样 就 没有 外 部 的 层 琶 上 下 文 能 束缚 它们 了 。 

有 些 开 发 人 员 会 恕 不 住 给 页 面 的 大 量 元 系 使 用 定位 。 一 定 要 克制 这 种 冲动 。 定 位 用 得 越 多 ， 
网 页 就 越 复杂 ， 也 了 台 越 难 调 试 。 如 打 你 定位 了 大 量 元 素 ， 就 回头 评 佑 一 下 现在 的 情况 ,尤其 是 当 
你 发 现 很 难 调试 出 目 己 想 要 的 布局 时 , 一 定 要 反思 。 如 果 可 以 用 别 的 方法 实现 某 个 布局 ,应 该 优 
先 用 那些 方法 。 

如 果 能 够 依 徘 文档 流 ， 而 不 是 徘 明 确 指 定 定 位 的 方式 实现 布局 , 那么 浏览 带 会 玫 我 们 处 理 好 
很 多 边 绿 情况 。 记 住 , 定位 会 将 元 素 拉 出 文档 流 。 一 般 来 说 ， 只 有 在 需要 将 元 系 合 放 到 别 的 元 系 
之 前 时 ， 才 应 该 用 定位 。 






































7.5 ” 阁 性 定位 


人 们 已 经 用 四 种 主要 的 定位 类 型 (前 态 、 固 定 、 绝 对 以 及 相对 ) 很 长 时 间 了， 不 过 现在 浏览 
售 还 提供 了 一 种 新 的 定位 类 型 ， 粘性 定位 ( sticky positioning )。 它 是 相对 定位 和 固定 定位 的 结合 
体 : 正常 情况 下 ， 元 系 会 随 着 页 面 滚动 ， 当 到 达 屏 幕 的 特定 位 置 时 ， 如 采用 户 继续 滚动 ， 它 怠 会 
“锁定 ”在 这 个 位 置 。 最 第 见 的 用 例 是 侧 边 栏 导 航 。 

曾经 只 有 Firefox 浏览 器 支持 粘性 定位 ， 但 是 在 写本 书 的 时 候 ，Chrome 和 Edge 浏览 器 都 支 
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持 了 该 特性 。Safari 则 需要 加 上 浏览 右前 级 (position: -webkit-sticky ) 才 文 持 。 记 得 在 
Can TUse 网 站 中 检索 CSS position:sticky 查看 最 新 的 文 持 情 况 。 如 有 果 不 文 持 ,通常 要 用 固定 定位 
或 者 绝对 定位 来 回 退 处 理 。 

你 的 网 页 已 经 有 了 模 态 框 和 下 拉 菜 单 ， 现 在 升级 一 下 网 页 ,将 其 改 成 两 栏 布局 ,右边 栏 是 一 
个 粘性 定位 的 侧 边栏 ， 效 果 如 图 7-14 所 示 。 


























Main Menu ~ Home 
Coffees 
Wombat Coffee Roasters ee 
Specials 
About us 








图 7-14 ”粘性 定位 的 侧 边 栏 在 初始 状态 下 位 置 正常 


网 页 刚 加 载 的 时 候 ,， 侧 边栏 的 位 置 一 切 正 常 。 网 页 滚动 , 它 也 跟着 滚动 直到 滚 到 快要 离开 视 
口 的 时 候 ， 它 会 锁定 在 那个 位 置 。 当 网 页 的 剩余 部 分 继续 滚动 时 ， 它 却 好 像 固 定 定 位 的 元 素 一 样 
停留 在 屏幕 上 ， 效 果 如 图 7-15 所 示 。 


Wombat Coffee Roasters 





Home 





Coffees 





Brewers 





Specials 





About us 


图 7-15” 侧 边栏 固定 在 一 个 位 置 


接 下 来 修改 网 页 结构 ， 定 义 两 栏 。 在 HTML 里 将 容器 改 成 如 代码 清单 7-11 所 示 的 代码 。 把 
之 前 的 内 容 (下 拉 菜 单 和 网 页 标题 ) 放 在 左边 栏 ， 再 添加 一 个 右边 栏 放 “affix” 菜 


代码 清单 7-11 将 网 页 改 为 市 侧 边 栏 的 两 栏 布局 


<div class="container"> ee 

: ji 将 现 有 的 内 容 用 co1l-main 
<main class="col-main"> Ke 
包 起 来 ， 作 为 主体 栏 


<nav> 
<div class="dropdown"> 
<div class="dropdown-label">Main Menu</div> 
<div class="dropdown-menu"> 
<ul class="submenu"> 
<l1li><a href="/">Home</a></11i> 
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<1i><a href="/coffees">Coffees</a></11i> 
<1i><a href="/brewers">Brewers</a></11i> 
<l1i><a href="/specials">Specials</a></1i> 
<1i><a href="/about">About us</a></11i> 
/TS 
</div> 
</div> 
</nav> 
<hli>Wombat Coffee Roasters</hi1> 
</main> 
0 一 个 他， 时 
放 一 个 affix 元 素 


<ul class="submenu"> 








<l1i><a href="/">Home</a></11i> 
<l1i><a href="/coffees">Coffees</a></11i> 
<l11i><a href="/brewers">Brewers</a></11i> 
<l1li><a href="/specials">Specials</a></1i> 
<l1i><a href="/about">About us</a></11i> 
</ul> 
</div> 
</aside> 


</div> 


接 下 来 更 新 CSS, 将 容 带 设 为 弹性 容 表 ,设置 两 栏 的 宽度 。 本 例 复 用 了 下 拉 沫 单 的 于 沫 单 的 
样式 ， 当 然 你 也 可 以 给 侧 边 栏 添加 其 他 的 元 系 和 样式 。 将 代码 清单 7-12 加 到 样式 表 里 。 


代码 清单 7-12 ”创建 一 个 两 栏 布局 以 及 粘性 定位 的 侧 边栏 


.Container { 





display: flex; 


width: 80%; 将 容器 设置 为 弹性 容器 ， 
max-width: 1000px; 实现 两 栏 布局 
margin: lem auto; 
min-height: 100vh; 特意 给 容器 

设置 高 度 

.Col-main { 
flex: 1 80%; 

} 

给 两 栏 布局 

.Col-sidebar f{ 
flex: 20%; 

} 

| 给 侧 边栏 的 菜单 添加 粘 滞 定 位 。 它 会 
Position: sticky; 人 的 位 置 
top: lem; 





} 


以 上 代码 主要 用 来 设置 两 栏 布 局 。 最 后 只 用 了 两 句 声明 来 给 affix 元 系 定 位 。top 值 设置 
了 元 素 最 终 固定 的 位 置 : 距离 视 口 的 顶部 lem。 
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因为 粘性 元 素 永 远 不 会 超出 父 元 素 的 范围 ， 所 以 本 例 中 affix 不 会 超出 col-sidqebar 的 
汇 围 。 当 深 动 页 面 的 时 候 ，co1l1-sidebar 会 一 下 正 党 深 动 , 但 是 affix 会 在 滚动 到 特定 位 置 时 
保 下 来 。 如 采 继 续 滚 动 得 足够 远 ,粘性 元 素 还 会 恢复 滚动 。 这 种 情况 只 在 父 元 素 的 砍 边 到 达 粘 性 
元 条 的 压 边 时 发 生 。 注意， 只 有 当 父 元 系 的 局 度 大 于 粘性 元 系 时 才 会 让 粘性 元 系 固定 ， 因 此 这 里 
我 特意 给 弹性 容 亏 加 上 min-height, 以 便 让 父 元 到 足够 高 。 




















7.6 ”总结 


口 模 态 框 使 用 固定 定位 。 

口 下 拉 沫 单 、 工 具 提 示 及 其 他 动态 交互 使 用 绝对 定位 。 

口 实现 这 些 功 能 时 还 要 考虑 可 访问 性 。 

口 关于 z-index 有 两 个 地 方 要 注意 : 它 只 对 定位 元 素 有 效 ; 它 会 创建 一 个 层 琶 上 下 文 。 
口 在 一 个 页 面 创建 多 个 层 羡 上 下 文 时 一 定 要 当心 潜在 的 隐 阱 。 

口 使 用 粘性 定位 时 注 苇 浏览 右 的 羔 容 性 。 


























响应 式 设计 





本 章 概要 

口 基于 多 种 设备 和 屏幕 尺寸 构建 网 页 

口 使 用 媒体 查询 ， 根 据 视 口 大 小 来 改变 设计 
口 采用 “移动 优先 ”的 方式 

口 响应 式 图 片 


如 今 我 们 随时 随地 都 能 上 网 。 上 班 用 台式 计算 机 上 网 ， 回 家 缮 在 床上 用 平板 上 网 ,在 客厅 里 
甚至 还 可 以 用 电视 屏幕 上 网 ， 更 不 要 说 随身 携 市 的 智能 手机 了 。 从 未 有 任何 一 样 东 西 像素 载 了 
HTML、CSS 和 JavaScript 的 Web 平 台 那 样 ， 成 为 了 一 个 如 此 普 过 存在 的 生态 系统 。 

这 也 给 Web 开发 人 员 珊 来 了 一 个 颇具 挑战 性 的 问题 : 应 该 如 何 设 计 网 站 ， 才 能 让 用 户 在 任 
何 设 备 上 访问 时 , 网 站 都 既 实 用 又 美观 ?” 最 初 开发 人 员 通 过 创建 两 个 网 站 来 解决 这 个 问题 : 日 面 版 
和 移动 版 。 例 如 ， 针 对 移动 设备 ， 服 务 需 会 将 http://www.wombatcoffee.com 重 定 问 到 http://m.wom- 
batcoffee. com。 移 动 版 网 站 通常 对 小 屏 雄 用 户 提 供 的 体验 较 少 ， 设 计 得 更 精简 。 

随 痢 市 场 上 出 现 越 来 越 丰 蚜 的 设备 , 这 种 方法 便 开 始 提 补 见 肘 了 。 平 板 设备 该 用 移动 版 还 是 
蝎 面 版 呢 ? 大 屏 的 “平板 手机 ” 呢 ? iPad Mini 呢 ? 如 有 条 移动 端 用 户 想 要 执行 条 面 版 的 功能 呢 ? 
最 终 ， 这 种 将 晶 面 版 和 移动 版 强制 分 开 的 方案 所 市 来 的 麻烦 比 它 解决 的 问题 还 多 。 除 此 之 外 , 还 
需要 同时 维护 多 个 网 站 。 

更 好 的 方式 是 给 所 有 用 户 提 供 同一 份 HTML 和 CSS。 通 过 使 用 几 个 关键 技术 ， 根 据 用 户 浏 
览 需 视 口 的 大 小 (或 者 屏 划 分辨 率 ) 让 内 容 有 不 一 样 的 泻 染 结 采 。 这 种 方式 不 需要 分 别 维护 两 个 
网 站 。 只 需要 创建 一 个 网 站 ,就 可 以 在 智能 手机 、 平板 , 或 者 其 他 任何 设备 上 运行 。 网 页 设计 师 
Ethan Marcotte 称 这 种 方式 为 响应 式 设 计 (responsive design )。 

浏览 网 页 的 时 候 , 留意 一 下 你 遇 到 的 响应 式 设 计 。 看 看 网 站 是 如 何 响应 不 同 的 浏览 融 宽 度 的 。 
新 闻 类 网 站 尤其 有 趣 ， 因 为 它们 需要 将 很 多 内 容 挤 到 一 个 页 面 。 在 写作 本 书 的 时 候 ， 一 些 新 闻 网 
站 就 提供 了 一 个 很 好 的 示范 ， 它 根据 浏览 融 窗 口 的 宽度 分 别提 供 了 一 列 、 两 列 、 三 列 布局 。 通 稼 
我 们 缩放 浏览 硕 窗 口 的 宽度 就 可 以 直接 查看 网 页 布局 的 啊 应 。 这 如 是 啊 应 式 设 计 的 工作 方式 。 

响应 式 设计 的 三 大 原则 如 下 。 

(1) 移动 优先 。 这 意味 者 在 实现 介面 布局 之 前 先 构建 移动 版 的 布局 。 
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(2) emedaia 规则 。 使 用 这 个 样式 规则 , 可 以 为 不 同 大 小 的 视 口 定制 样式 。 用 这 一 语法 , 通常 
叫 作 媒 体 查询 (media queries )， 写 的 样式 只 在 特定 条 件 下 才 会 生效 。 

(3) 流 式 布局 。 这 种 方式 允许 容 规 根据 视 口 宽度 缩放 尺寸 。 

本 章 将 介绍 这 三 种 原则 。 首先 我 们 会 构建 一 个 响应 式 网 页 , 然后 在 构建 过 程 中 逐步 介绍 三 大 
原则 。 最 后 会 专门 介绍 图 片 ， 因 为 在 啊 应 陈 网 站 中 对 岁 片 的 处 理 比 较 特 丈 。 


8.1 移动 优先 


响应 式 设计 的 第 一 原则 就 是 移动 优先 ( mobile first ), 顾名思义 就 是 构建 桌面 版 之 前 要 先 构建 
移动 端 布局 。 这 样 才 能 确保 两 个 版 本 都 生效 。 

开发 移动 版 网 页 有 很 多 限制 : 屏 旬 空间 受 限 、 网 络 更 慢 。 用 户 跟 网 页 交互 的 方式 也 不 一 样 : 
可 以 打字 , 但 是 用 着 很 别扭 ,不 能 将 鼠标 移动 到 元 素 上 触发 效果 等 。 如 果 一 开始 就 设计 一 个 包含 
全 部 交互 的 网 站 ， 然 后 再 根据 移动 设备 的 限制 来 制约 网 站 的 功能 ， 那 么 一 般 会 以 失败 告终 。 

而 移动 优先 的 方式 则 会 让 你 设计 网 站 的 时 候 就 一 直 想 着 这 些 限 制 。 一 旦 移动 版 的 体验 做 好 了 
(或 者 设计 好 了 )， 就 可 以 用 “渐进 增强 ”( progressive enhancement ) 的 方式 为 大 屏 用 户 增加 体验 。 

图 8-1 是 我 们 要 构建 的 网 页 。 你 猜 对 了 ， 这 是 移动 版 的 设计 。 

WOMBAT COFFEE ROASTERS 二 


We love coffee 




















Welcome to Wombat Coffee ‘Roasters! We are passionate 


about our-craft, striving to bring you thesbes 


> A 





SINGLE-ORIGIN 


We have built partnerships with small farms around the world 
to hand-select beans at the peak of season. We then carefully 
roast in small batches to maximize their potential. 

BLENDS 


Our tasters have put together a selection of carefully balanced 
blends. Our famous house blend is available year round. 


BREWING EQUIPMENT 


We offer our favorite kettles, French presses, and pour-over 
cones. Come to one of our brewing classes to learn how to 
brew the perfect pour-over cup. 


图 8-1 移动 版 的 页 面 设计 
网 员 有 三 个 主要 组 件 : 涉 部 、 和 履 盖 了 一 些 文字 的 主 图 、 主 内 容 。 还 有 点 击 右 上 角 图 标 后 会 出 


现 的 隐藏 末 单 ( 如 图 8-2 所 示 )。 这 个 由 三 条 横 线 组 成 的 图 标 通 常 被 叫 作 汉堡 包 图 标 ， 因 为 它们 
就 像 汉 堡 包 的 面包 和 肉 饼 。 
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WOMBAT COFFEE ROASTERS 二 


We love coffee 





We have built partnerships with small farms around the world 
to hand-select beans at the peak of season. We then carefully 
roast in small batches to maximize their potential. 


BLENDS 


Our tasters have put together a selection of carefully balanced 
blends. Our famous house blend is available year round. 


BREWING EQUIPMENT 
We offer our favorite kettles, French presses, and pour-over 


cones. Come to one of our brewing classes to learn how to 
brew the perfect pour-over cup. 





图 8-2 在 移动 版 页 面 上 点 击 或 者 轻 触 汉堡 包 图 标 ， 打 开 琳 单 


移动 端 布局 一 般 是 很 朴素 的 设计 。 除 了 前 面 提 到 的 交互 莱 单 ,移动 版 设计 主要 关注 的 是 内 容 。 
在 大 屏 上 ， 可 以 把 页 面 的 大 块 区域 拿 来 做 头 部 、 主 图 、 和 菜单 。 然 而 在 移动 设备 上 ， 用 户 通常 有 
更 明确 的 目标 。 他 们 可 能 正在 外 面 和 朋友 们 玩 , 想 要 快速 查 到 商店 的 营业 时 间或 者 其 他 具体 的 信 
号 ， 比 如 商品 价格 或 者 目的 地 址 。 

移动 版 设计 就 是 内 容 的 设计 。 想 想 看 ,在 果 面 版 网 页 里 ,一 边 是 文 草 ， 为 一 边 古 侧 边 祷 ， 侧 
边栏 里 有 链接 和 不 太 重 要 的 内 容 。 然 而 在 移动 问 , 我 们 希望 文章 完 出 现 。 换 句 话说 , 我 们 布 望 最 重 
要 的 内 容 先 出 现在 HTML 里 。 这 一 点 恰好 跟 可 访问 性 的 关注 点 不 谋 而 合 : 一 个 屏 硕 阅读 此 优先 读 
到 “重要 的 内 容 “， 或 者 用 户 使 用 键盘 浏览 时 先 获 取 到 文章 里 的 链接 ， 然 后 才 是 侧 边栏 里 的 链接 。 

话 虽 如 此 ,这 也 不 是 一 条 铁 律 。 比 如 在 上 面 的 示例 里 , 主 图 虽然 没有 乓 下 的 内 容重 要 , 但 是 
它 是 设计 中 最 出 彩 的 部 分 , 因此 应 当 放 在 页 面 顶部 。 它 还 包含 了 少量 内 容 , 浏览 起 来 也 不 费 工夫 。 

重点 ”做 响应 式 设计 时 ， 一 定 要 确保 HTML 包含 了 各 种 屏幕 尺寸 所 需 的 全 部 内 容 。 你 

可 以 对 每 个 屏幕 尺寸 应 用 不 同 的 CSS， 但 是 它们 必须 共享 同一 份 HTML。 

现在 ,需要 思考 较 大 的 视 口 该 如 何 设 计 。 虽 然 要 和 驳 给 移动 端 写 布局 , 但 是 心里 装着 整体 的 设 
计 , 才能 帮助 我 们 在 实现 过 程 中 做 出 合适 的 决定 。 比 如 在 本 童 的 示例 里 需要 诊 加 一 个 中 等 屏 才 的 
和 大 拼 幕 的 断 点 (breakpoint ). 图 8-3 显示 的 是 中 每 屏 化 的 布局 。 

































































断 点 一 一 一 个 特殊 的 临界 值 。 屏幕 尺寸 达到 这 个 值 时 ,网 页 的 样式 会 发 生 改 变 ， 以 


便 给 当前 屏幕 尺寸 提供 最 佳 的 布局 。 
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WOMBAT COFFEE ROASTERS 


We love coffee 





SINGLE-ORIGIN BLENDS BREWING EQUIPMENT 
We have built partnerships Our tasters have put We offer our favorite 

with smallfarms around the together a selection of kettles, French presses, 
world to hand-select beans carefully balanced blends. and pour-over cones. 

at the peak of season. We Our famous house blend Come to one of our 

then carefully roast in small is available year round. brewing classes to learn 
batches to maximize their how to brew the perfect 
potential. pour-over cup. 











图 8-3 ”中 等 屏幕 视 口 下 的 网 页 


这 个 视 口 尺寸 比 移动 端 稍微 多 了 一 些 发 挥 空间 。 头 部 和 主 图 可 以 设置 更 大 的 内 边 距 。 菜 单元 
素 刚好 可 以 在 一 行 排 开 ， 这 样 就 无 须 隐 藏 了 。 汉 堡 包 图 标 去 掉 了 ， 因 为 无 须 用 它 来 打开 菜单 。 现 
在 主 内 容 可 以 分 布 到 三 个 等 宽 的 列 。 大 部 分 元 素 填充 在 距离 视 口 边缘 lem 的 范围 内 。 

更 大 的 视 口 跟 上 面 一 样 ， 但 是 可 以 增加 网 页 的 外 边 距 ， 增 加 主 图 尺寸 ， 如 图 8-4 所 示 。 


WOMBAT COFFEE ROASTERS 


We love coffee 























Welcome to Wombat Coffee Roasters! We are passionateiabout our craft strivingtobring you the best hand-crafted coffee 


in the city. 





SINGLE-ORIGIN BLENDS BREWING EQUIPMENT 

We have built partnerships with small farms around Our tasters have put together a selection of We offer our favorite kettles, French presses, and 
the world to hand-select beans at the peak of carefully balanced blends. Our famous house pour-over cones. Come to one of our brewing 
season. We then carefully roast in small batches biend is available year round. classes to learn how to brew the perfect pour-over 
to maximize their potential. cup. 





图 8-4 大 屏幕 视 口 下 的 网 页 
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因为 要 先 实现 移动 版 设计 ,所 以 更 应 该 了 解 在 更 大 的 视 口 下 网 页 长 什么 样 ,这 样 才能 在 一 开 
始 就 写 出 合适 的 HTML 结构 。 新 建 一 个 网 页 和 样式 表 ， 给 页 面 添 加 样式 表 ， 同 时 给 HTML 的 
<body> 元 素 添 加 代码 清单 8-1 所 示 的 内 容 。 

以 下 代码 看 起 来 跟 非 啊 应 式 设 计 的 代码 一 样 ,但 是 有 几 处 考虑 了 移动 版 设计 , 这 稍 后 会 解释 。 


代码 清单 8-1 啊 应 式 设 计 的 网 页 标记 
<header id="header" class="page-header"> 
<div class="title"> 
<hi>Wombat Coffee Roasters</hi1i> 
<div class="slogan">We love coffee</div> 





</div> 
</header> 
给 移动 版 菜单 
<nav class="menu" id="main-menu"> 加 汉堡 包 图 标 
<button class="menu-toggle" id="toggle-menu"> 
toggle menu 
</button> 
<div class="menu-dropdown"> 
<ul class="nav-menu"> 在 移动 设备 上 主 
LT rete" yaoout tmlLTeApoute/AaSe71I 菜单 默认 隐藏 
<li><a href="/shop.html">Shop</a></11i> 
<l1i><a href="/menu.html">Menu</a></11i> 
<l1i><a href="/brew.html">Brew</a></11i> 





</ul> 





</div> 
</nNnav> 


<aside id="hero" class="hero"> 
Welcome to Wombat Coffee Roasters! We are 
passionate about our craft, striving to bring you 
the best hand-crafted coffee in the city. 
</aside> 


<main id="main"> 
<div class="row"> 
<section class="column"> 
<h2 class="subtitle">Single-origin</h2> 
<p>We have built partnerships with small farms 
around the world to hand-select beans at the 
peak of season. We then carefully roast in 
<a href="/batch-size.html">small batches</a> 
to maximize their potential.</p> 
</section> 
SSCLLON /Cleess "eol 给 中 等 屏幕 和 大 屏幕 
<h2r Class="SUuGtitlel>D lerndase /hh2> 的 视 口 加 上 行 和 列 
<D>OUT tasters have put together a selection of 
carefully balanced blends. Our famous 
<a href="/house-blend.html">house blend</a> 
1S available year round.</p> 
</section> 
<section class="column"> 
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<h2 class="subtitle">Brewing Equipment</h2> 
<p>We offer our favorite kettles, French 
presses, and pour-over cones. Come to one of 





our <a href="/classes.html">brewing 
classes</a> to learn how to brew the perfect 
Pour-over cup.</p> 
</section> 
</div> 
</main> 


在 这 段 标记 里 , 切换 移动 版 末 单 的 图 标 放 在 nav 元 素 里 。 nav-menu 放置 的 位 置 能 够 同时 满 
足 移 动 和 时 面 设 计 的 需求 。row 和 column 类 是 为 了 时 面 设计 而 添加 的 。( 你 可 能 从 上 面 的 代码 
看 不 出 来 ， 没 关系 ， 稍 后 会 解释 。) 

接 下 来 给 页 面 添加 样式 。 首 先 ， 添 加 简单 的 样式 设置 页 面 的 字体 、 标 题 和 颜色 ， 如 图 8-5 所 
示 。 因 为 目前 关注 的 是 移动 山 样 式 ， 所 以 要 将 浏览 套 的 宽度 缩小 ,模拟 一 个 移动 设备 的 大 小 。 这 
样 就 能 看 到 小 屏 芭 上 的 页 面 是 什么 样 的 了 。 

WOMBAT COFFEE ROASTERS 


We love coffee 














toggle menu 


About 
Shop 
Menu 
Brew 


Welcome to Wombat Coffee Roastérs! We are passionate 


about ourcraft, striving tobring youtbeube 


Sa 





SINGLE-ORIGIN 


We have built partnerships with small farms around the world to 
hand-select beans at the peak of season. We then carefully 
roast in small batches to maximize their potential. 


图 8-5 加 上 简单 样式 后 的 网 页 


样式 如 代码 清单 8-2 所 示 。 将 它们 添加 到 样式 表 ， 创建 border-box ， 为 其 添加 大 小 、 字 体 和 
链接 颜色 。 人 代码 清 单 8-2 用 到 了 第 2 音 (2.4.1 市 ) 介绍 的 基于 视 口 的 啊 应 式 字 号 ,并 且 和 定义 了 页 
面 头 部 和 主体 的 样式 。 


代码 清单 8-2 给 页 面 加 上 初始 样式 
:root { 
box-sizing: border-box; 基础 字号 会 根据 视 口 
font-size: calc(lvw + 0.6em); 大 小 适当 缩放 
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x EEOEe. 
*.:after { 
box-sizing: inherit; 


body { 
margin: 0; 
font-family: Helvetica, Arial, sans-serif,; 


a:link { 
Color: #1476b8; 
font-weight: lbolgd; 
text-decoration: none; 


a:visitedqd { 
Color: #1430b8; 


a:hover { 
text-decoration: underline; 


a:active { 
Color: #b81414; 


.bage-header { 





padding: 0.4em lem; 
background-color: #f£fff; 


rt 网 页 头 部 和 标题 
COlor: #333， 
text-transform: uppercase; 
font-size: 1.5rem; 
margin: 0.2em 0; 


.Slogan { 
Color: #888; 
font-size: 0.875em; 
margin: 0; 


} 
.hero { 

padding: 2em lem; 

text-align: center; | 给 页 面 加 上 主 图 

background-image: url (coffee-beans.jpg);} 

background-size: 100%; 

Color: #f£fff.; 2 2 

AAAN \ A ~ 

text-shadow: 0.1em 0.1em 0.3em #000; 深 色 的 文字 投影 确保 浅 色 
) 文字 在 复杂 背景 中 可 读 
main { EE 

主体 内 容 


padding: lem; 
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.Subtitle 1{ 
margin-top: 1.5em; 
margin-bottom: 1.5em; 
font-size: 0.875rem; 
text-transform: upPpercase; 


} 

以 上 代码 比较 简单 。 它 将 网 页 标题 和 副标题 设置 为 全 大 写 , 还 给 页 面 上 各 种 组 件 加 上 了 外 边 
中 和 内 边 距 ， 并 调整 了 字号 。 

主 图 里 的 text-shadow 属性 你 可 能 没 见 过 。 它 里 面 的 几 个 值 最 终 会 构成 文字 下 面 的 投影 。 
前 两 个 值 是 华 卡 儿 坐 标 ， 表 明了 投影 相对 于 文字 位 置 的 偶 移 量 。0. 1em 0.1em 表示 投影 相对 于 
文字 稍微 往 右 下 偶 移 。 第 三 个 值 (0.3em ) 表示 投影 模糊 的 程度 。 最 后 #000 定义 了 投影 的 颜色 。 


8.1.1 创建 移动 人 版 的 菜单 
目前 页 面 还 剩 最 复杂 的 部 分 等 待 实现 : 菜单 。 现 在 开始 构建 。 完 成 后 的 效果 如 图 8-6 所 示 。 
WOMBAT COFFEE ROASTERS = 




















About 


图 8-6 在 移动 设备 上 打开 的 导航 末 单 


不 管用 什么 语言 写 代码 都 是 一 个 迭代 过 程 ，CSS 也 不 例外 。 在 这 个 页 面 里 , 菜单 需要 特殊 考 
虚 。 我 原本 是 将 <nav> 放 在 <header> 中 ,希望 汉 保 包 图 标 出 现在 <header> 里 。 人 然而 在 写 CSS 
的 过 程 中 ， 我 发 现 需 要 将 两 个 元 素 作 为 兄弟 节点 ， 这 样 它们 才能 在 昌 面 设备 中 自然 地 上 下 排列 。 
有 了 时候 需要 反复 调试 HTML 里 的 代码 才能 实现 。 

从 功能 上 讲 ， 这 个 沫 单 很 像 第 7 革 ( 代码 清单 7-6 ) 里 的 下 拉 沫 单 。 初 始 状态 下 ， 我 们 将 
menu-dropdown 隐藏 起 来 。 然 后 添加 一 些 JavaScript 实现 菜单 显示 隐藏 的 功能 ， 而 不 是 像 第 7 
章 那 样 用 鼠标 悬 停 实 现 。 当 用 户 点 击 (或 者 轻 触 ) menu-toggle 时 ， 出 现下 拉 荣 单 ; 第 二 次 点 
击 时 ， 隐 藏 下 拉 荣 


提示 “屏幕 阅读 器 将 某 些 HTML5 元 素 ， 比 如 <form>、<main>、<nav> 以 及 <aside> 
作为 里 程 碑 ， 玫 助 弱视 用 户 快速 浏览 网 页 。 此 ， 要 将 控制 菜单 显示 的 汉堡 包 按 钮 放 
在 <nav> 元 素 里 ， 以 便 用 户 浏览 到 这 里 的 时 候 快速 发 现 它 。 否 则 ， 用 户 跳 到 <nav> 的 时 
候 只 会 发 现 它 是 空 的 (屏幕 阅读 器 忽略 了 display: none 的 下 拉 菜 单 )。 
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邓 盾 的 汉堡 包 菜 单 
汉堡 包 菜 单 最 近 几 年 很 流行 。 它 解决 了 在 小 屏幕 里 显示 更 多 内 容 的 问题 ， 但 是 也 有 商 端 。 
将 重要 元 素 〈 比 如 主要 的 导航 菜单 ) 隐藏 起 来 会 减少 用 户 跟 它们 交互 的 机 会 。 
这 些 需 要 你 跟 你 的 国 队 或 设计 师 评 估 。 有 时 候 用 汉堡 包 菜 单 很 合适 ， 有 了 时候 则 不 是 。 无 论 
怎样 ， 竺 握 构 建 汉堡 包 菜 单 所 需要 的 技术 还 是 很 重要 的 。 





在 代码 清单 8-1 里 ，<nav> 作 为 一 个 兄 第 元 系 出 现在 <headqer> 后 面 。 这 意味 肴 它 会 流动 到 头 
部 下 面 的 空间 。 为 了 实现 设计 效果 ,这 里 需要 进行 一 项 不 背 用 的 操作 : 使 用 绝对 定位 将 菜单 切换 
按钮 拉 到 上 面 ， 证 它 出 现在 头 部 元 素 里 面 。 将 代码 清单 8-3 的 菜单 样式 代码 添加 到 样式 表 。 


代码 清单 8-3 ”移动 菜单 样式 
.menu { 二 
Dositione Felative -4 给 两 个 绝对 定位 的 子 














} 元 素 创 建 包含 块 


.menu-toggle { 


1 七] : absolute; . 
i 负 的 top 值 将 按钮 拉 
Oop: 1 .2em; > 
right: 0.1em; 到 了 包含 块 的 上 面 


border: 0; 
7 兰 涪 | 上 监 绠 黄 
background-color: transparent ， 憩 雷 浏览 器 的 
按钮 样式 





font-size: 3em; 
width: lem; 
height: lem; 


line-height: 0.4; , 

. 铂 旷 4 安 4 有 所 突 虱 它 
text-indent: Sem; 隐藏 按钮 的 文本 内 容 ， 将 它 
white-space: nowrap; 的 大 小 固定 成 lem 
overflow: hidden; 





} 


.menu-toggle: :after { 
position: absolute; 
top: 0.2em; 


left: .2em; = = 
二 用 一 个 表示 汉堡 包 图 标的 


display: block; Ar 口 名 寺内 兰 
content: "\22617"， Unicode 符号 将 按钮 禾 和 着 


text-indent: 0; 


} 


.menu-dropdown { 
display: none; 
position: absolute; 
PLOht OQ 
left: 0; 
margin: 0; 
当 给 菜单 加 上 类 is-open 的 时 
.menu.is-open .menu-dropdown { 候 ， 显 示 下 拉 菜 单 
display: block; 
} 
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以 上 代码 实现 了 很 多 样式 , 但 是 大 部 分 是 已 经 介绍 过 的 技术 。 相 对 定位 的 菜单 容 需 为 它 的 两 
个 子 元 素 一 一 切换 按钮 和 下 拉 荣 单一 一 创建 了 包含 块 。 负 的 top 值 将 切换 按钮 癌 上 拉 了 一 段 ， 
right 属性 将 它 定 位 在 屏 友 右 侧 。 最 后 切换 按钮 就 位 于 网 页 标题 右 侧 的 头 部 区 域 了 。 

然后 在 按钮 上 用 一 些 奉 换 的 “小 把 戏 ”: 限制 它 的 宽度 ， 加 上 较 大 的 文字 缩 进 ， 并 且 将 
overflow 设置 成 hidden， 从 而 隐藏 了 按钮 本 刁 的 文字 (“toggle menu”)。 然 后 给 按钮 的 : :after 
伪 元 素 加 上 一 个 Unicode 字符 (\2261 ) 作为 内 容 。 这 个 字符 是 一 个 数学 符号 , 由 三 条 槛 线 组 成 ， 
即 汉堡 包 菜 单 。 如 果 想 要 自 定 义 按 钮 的 图 标 ， 可 以 给 伪 元 素 使 用 背景 图 片 。 

如 果 你 不 确定 每 个 样式 的 作用 是 什么 ,可 以 将 它们 注释 挥 , 看 看 在 网 员 上 的 效果 。 这 个 网 页 
在 大 屏 下 看 起 来 会 有 点 不 合适 。 将 浏览 大 窗 口 缩小 ， 就 更 像 在 移动 端 看 到 的 样子 了 。 

使 用 类 is-open 是 男 一 个 “小 把 戏 ”, 使 用 这 个 类 时 , 最 后 的 选择 能 ( .menu .is-open.menu- 
dropdown ) 就 会 选中 下 拉 且 单 。 没 有 这 个 类 时 ， 束 不 会 选中 下 拉 亲 单 。 这 样 就 实现 了 末 单 下 拉 
的 功能 。 如 图 8-7 所 示 ， 还 未 添加 其 他 样式 的 下 拉 羔 单 ( 注意 左 侧 主 图 上 面 的 四 个 链接 )。 

WOMBAT COFFEE ROASTERS 一 


We love coffee 























Wsleome to Wombat Coffee"Roasters! We are passionate about our craft, 


striving to bring you'the’best hand:=crafted coffee in the city. 





SINGLE-ORIGIN 


We have built partnerships with small farms around the world to hand-select 
beans at the peak of season. We then carefully roast in small batches to 


图 8-7 汉堡包 按钮 


代码 清单 8-4 的 JavaScript 会 在 按 下 切换 按钮 的 时 候 添 加 和 删除 类 is-open。 将 以 下 代码 放 
到 </ body > 标签 之 前 。 


代码 清单 8-4 ”实现 下 拉 功 能 的 JavaScript 


<script type="text/jJavascript"> 





(function () { 监听 器 点 击 事件 (也 包括 触 
Var button = document .getElementById('toggle-menu'),; 屏 设 备 的 轻 触 事件 ) 
button.addEventListener('click', function(event) { 

event .preventDefault (); 
Var menu = document .getElementBylid('main-menu').; 
TW 1S-open' ) ; 在 菜单 上 切换 类 
is-open 


}) (); 


</script> 


当 点 击 汉 保 包 图 标的 时 候 , 会 打开 下 拉 沫 单 ， 可 以 看 到 沫 单 的 文字 出 现在 网 页 内 容 前 面 。 再 
次 点 击 汉堡 包 图 标 就 会 关闭 菜单 。 这 种 方式 下 ，CSS 会 负责 显示 和 隐藏 指定 元 素 ，JavaScript 只 
需要 负责 改变 一 个 类 。 
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现在 下 拉 荣 单 可 以 工作 了 。 还 需要 给 nav-menu 添加 一 些 样式 ,将 代码 清单 8-5 添加 到 样式 表 。 
代码 清单 8-5” 守 骨 末 单 的 样式 


.nav-menu { 
margin: 0; 
padding-left: 0; 
border: lpx solid #ccc; 
list-style: none; 
background-color: #000，; 
Color: #f£fff; 


} 给 每 个 菜单 元 素 
加 上 边框 
.nav-menu > 11 + 11 { 


border-top: lpx solid #ccc; 
} 


.Nav-menu > 11 >a f{ 


display: block; 使 用 适当 的 内 边 距 确保 


adding: 0.8em lem; 
ee 有 足够 大 的 点 击 区 域 


font-weight: normal; 


} 


以 上 代码 也 都 已 经 介绍 过 。 由 于 菜单 是 一 个 列表 ( <ul> ), 因此 需要 履 盖 浏览 句 的 左 内 边 距 ， 
同时 删 反 列表 网 标 。 相 邻 的 兄弟 选择 天 会 选中 除了 第 一 个 元 系 之 外 的 所 有 沫 单项 , 给 每 个 菜单 项 
之 则 加 上 边框 。 

有 个 地 方 值得 注意 : 菜单 项 链接 周围 的 内 边 距 。 因 为 是 给 移动 设备 设计 ， 通 常 是 触 屏 设 备 ， 
所 以 关键 的 点 击 区 域 应 该 足够 大 ， 并 很 容易 用 一 个 手指 点 击 。 


提示 。 当 设计 移动 触 屏 设备 的 时 候 ， 确 保 所 有 的 关键 动作 元 素 都 足够 大 ， 能 够 用 一 个 
手指 轻松 点 击 。 千 万 不 要 让 用 户 放 大 页 面 ， 才 能 点 中 一 个 小 小 的 按钮 或 者 链接 。 


























8.1.2 ”给 视 口 添加 meta 标 签 


现在 移动 版 设计 已 经 完成 , 但 是 还 差 一 个 重要 细节 : 视 口 的 meta 标签 。 这 个 HTML 标签 告 
诉 移动 设备 ,你 已 经 特意 将 网 页 适 配 了 小 屏 设 备 。 如 朱 不 加 这 个 标签 ,移动 浏览 可 会 假定 网 页 不 
是 啊 应 式 的 ， 并 且 会 尝试 模拟 昌 面 浏览 各 ， 那 之 前 的 移动 端 设计 就 日 做 了 了。 为 了 避免 这 种 情况 ， 
按照 代码 清单 8-6 更 新 HTML 里 的 <head>， 将 meta 标签 包含 进去 。 


代码 清单 8-6 ”为 移动 端的 啊 应 式 设 计 添 加 视 口 meta 标签 
<head> 
<meta charset="UTF-8"> 








= 


<meta name="viewport" 

content="width=device-width, initial-scale=1"> 视 口 meta 标签 
<title>Wombat Coffee Roasters</title> 
<link href="styles.css" /> 

</head> 
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meta 标签 的 content 属性 里 包含 两 个 选项 。 首 先 ， 它 告诉 浏览 厚 当 解析 CSS 时 将 设备 的 
宽度 作为 假定 宽度 ， 而 不 是 一 个 全 屏 的 桌面 浏览 器 的 宽度 。 其 次 当 页 面 加 载 时 ， 它 使 用 
initial-scale 将 缩放 比 设置 为 100%。 








提示 “现代 浏览 器 的 开发 者 工具 提供 了 模拟 移动 浏览 器 的 功能 ， 包 括 较 小 的 视 口 尺寸 
和 视 口 meta 标签 的 行为 。 这 些 工具 能 帮助 我 们 测试 响应 式 设计 。 更 多 信息 请 参考 
https://developers.google.com/web/tools/chrome-devtools/device-mode/( Chrome ) 或 者 
https://developer.mozilla.org/en-US/docs/Tools/Responsive Design Mode (Firefox )。 


这 些 选 项 还 可 以 设置 为 其 他 值 , 但 是 以 上 配置 应 该 最 能 满足 实际 需求 。 例 如 ,你 可 以 明确 设 
置 wiath=320 让 浏览 器 假定 视 口 宽度 为 320px， 但 是 通常 不 建议 这 样 ， 因 为 移动 设备 的 尺寸 范 
玮 很 广 。 通 过 使 用 device-widqth， 可 以 用 最 合适 的 尺寸 演 染 内 容 。 

此 外 content 属性 还 有 第 三 个 选项 user-scalable=no, 阻止 用 户 在 移动 设备 上 用 两 个 手 
指 缩放 。 通 常 这 个 设置 在 实践 中 并 不 友好 , 不 推荐 使 用 。 当 链接 太 小 不 好 点 击 , 或 者 用 户 想 要 把 
某 个 图 厂 看 得 更 清楚 时 ， 这 个 设置 会 阻止 他 们 缩放 页 面 。 

有 关 视 口 meta 标签 的 更 多 信息 ， 请 查看 MDN 文档 : Using the Viewport Meta Tag to Control 


Layout on Mobile Browsers, 


8.2 ”媒体 查询 


啊 应 式 设 计 的 第 二 个 原则 是 使 用 媒体 查询 。 媒 体 查询 ( media queries ) 允许 某 些 样式 只 在 页 
面 满足 特定 条 件 时 才 生 歼 。 这 样 就 可 以 根据 屏幕 大 小 定制 样式 。 可 以 针对 小 屏 设 备 定义 一 套 样式 ， 
针对 中 等 屏 才 设备 定义 另 一 套 样 式 ,， 针 对 大 屏 设 备 再 定义 一 套 样 式 , 这 样 就 可 以 让 页 面 的 内 容 拥 
有 多 种 布局 。 

媒体 查询 使 用 emedia 规则 选择 满足 特定 条 件 的 设备 。 一 条 简单 的 媒体 查询 如 下 代码 所 示 。 

@Qmedia (min-width: S560px) { 

.title > hi { 
font-size: 2.25rem; 


y 
} 


在 最 外 层 的 大 括号 内 可 以 定义 任意 的 样式 规则 。@media 规则 会 进行 条 件 检 查 ， 只 有 满足 所 
有 的 条 件 时 ， 才 会 将 这 些 样 式 应 用 到 页 面 上 。 本 例 中 浏览 旨 会 检查 min-wiath: 560px。 只 有 
当 设 备 的 视 口 宽度 大 于 等 于 560px 的 时 候 ， 才 会 给 标题 设置 2.25rem 的 字号 。 如 果 视 口 宽 度 小 于 
560px， 那 么 里 面 的 所 有 规则 都 会 被 忽略 。 

媒体 查询 里 面 的 规则 仍然 遵循 第 规 的 层 车 顺序 。 它们 可 以 宪 盖 媒体 查询 外 部 的 样式 规则 ( 根 
据 选 择 需 的 优先 级 或 者 源码 顺序 ， 同 理 ,， 也 可 能 被 其 他 样式 履 盖 。 媒 体 碍 询 本 吴 不 会 影响 到 它 里 
面 选 择 硕 的 优先 级 。 
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警告 ”在 媒体 查询 断 点 中 推荐 使 用 em 单位。 在 各 大 主流 浏览 器 中 ， 当 用 户 缩放 页 面 或 
者 改变 默认 的 字号 时 ， 只 有 em 单位 表现 一 致 。 以 px 或 者 rem 单位 为 断 点 在 Safari 浏览 
器 里 不 太 可 靠 。 同 时 当 用 户 默认 字号 改变 的 时 候 ，em 还 能 相应 地 缩放 ， 因 此 它 更 适合 
当 源 点 。 














在 前 面 的 例子 里 用 的 是 px,， 但 是 在 媒体 查询 里 更 适合 用 em，em 是 基于 浏览 器 默认 字号 的 
(通常 是 16px )。 下 面 将 560px 改 成 35em(560 / 16)。 
找到 样式 表 中 .title 的 样式 ,将 媒体 查询 加 入 代码 清单 8-7 中 , 让 网 页 头 部 拥有 响应 式 行为 。 


代码 清单 8-7 ”给 网 页 标题 样式 增加 朵 点 
.title > hl f{ 
COlor: #333; 
text-transform: upPpercase; 
font-size: 1.5rem; 





margin: .2em 0; 
} 
命中 35em 以 上 
@media (min-width: 35em) { 的 断 点 
i 和 
font—si 2 ; 要 四 
人 用 更 大 的 字体 覆盖 移动 
) 端 字体 〈1.5rem ) 











现在 根据 视 口 大 小 ， 网 页 标题 有 两 种 不 同 的 字号 。 当 视 口 小 于 35em 的 时 候 是 1.5rem， 大 于 
35em 的 时 候 是 2.2Srem。 

通过 缩放 浏览 需 窗 口 就 能 测试 标题 样式 。 当 窗口 很 罕 的 时 候 ， 标 题 是 适应 移动 端的 小 字号 。 
慢 慢 放大 浏览 需 窗 口 ， 字 所 会 平滑 地 改变 ， 因 为 网 页 被 设置 了 啊 应 式 〈calc() ) 字号 (参见 代 
码 清单 8-2 )。 只 要 网 页 宽度 达到 35em (或 者 560px )， 标 题 的 字号 马上 就 会 变 成 2.25rem。 

在 这 里 ，560px 这 个 临界 值 被 称 为 断 点 。 大 多 数 情况 下 ， 整 个 样式 表 里 的 媒体 查询 只 会 复 用 
少数 几 个 断 点 。 本 和 草 稍 后 会 介绍 如 何 挑选 合适 的 断 点 。 


8.2.1 媒体 查询 的 类 型 
还 可 以 进一步 将 两 个 条 件 用 ana 关键 字 联 合 起 来 组 成 一 个 媒体 查询 ， 如 下 代码 所 示 。 


@Qmedia (min-width: 20em) and (max-width: 35em) { .. } 


这 种 联合 媒体 查询 只 在 设备 同时 满足 这 两 个 条 件 时 才 生 效 。 如 末 设 备 只 需要 满足 多 个 条 件 之 
一 ， 可 以 用 逗号 分 隐 ， 如 下 代码 所 示 。 


@Qmedia (max-width: 20em), (min-width: 35em) { .. } 


这 句 媒 体 查 询 匹 配 小 于 等 于 20em 的 视 口 ， 以 及 大 于 等 于 35em 的 视 口 。 
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1. min-width、max-width 等 

在 前 面 代码 里 ，min-wigdth 匹配 视 口 大 于 特定 宽度 的 设备 , max-wiaqth 匹配 视 口 小 于 特定 
冤 度 的 设备 。 它 们 被 统称 为 媒体 特征 ( media feature )。 

min-width 和 max-width 是 目前 用 得 最 广泛 的 媒体 特征 , 但 还 有 一 些 别 的 媒体 特征 ， 如 下 
所 示 。 

















min-height: 20em) 一 一 匹配 高 度 大 于 等 于 20em 的 视 口 。 
max-height: 20em) 一 一 匹配 高 度 小 于 等 于 20em 的 视 口 。 
匹配 宽度 大 于 高 度 的 视 口 。 
orientation: porttrait) 一 ”匹配 高 度 大 于 宽度 的 视 口 。 
min-resolution: 2dppx) 一 一 匹配 屏 莽 分 辨 率 大 于 等 于 2dppx (dppx 指 每 个 CSS 像 
素 里 包含 的 物理 像素 点 数 ) 的 设备 ， 比 如 视网膜 屏 硕 。 
口 (max-resolution: 2dppx) 一 一 匹配 屏 闪 分 辨 率 小 于 等 于 2dppx 的 设备 。 
完整 的 媒体 特征 列表 请 访问 MDN 文档 : @media。 
基于 分 辨 率 的 媒体 查询 比较 琼 手 ， 因 为 该 特征 比较 新 , 浏览 需 文 持 得 不 太 好 。 一 些 浏 览 露 文 
持 有 限 或 者 要 求 用 前 级 语法 。 比 如 IE9~11 和 Opera Mini 不 支持 dppx 单位 , 因此 需要 使 用 dpi( 
英才 的 像素 点 数 ) 单位 代替 〈 比 如 用 192dpi 代 蔡 2dpx )。Safari 和 iOS 的 Safari 文 持 前 绥 版 的 媒 
体 特征 -webkit-min-device-pixel-ratio。 总 之 , 最 好 的 方式 是 用 两 种 方式 结合 起 来 匹配 高 
分 辨识 ( 视网膜 屏 ) 的 显示 硕 。 





DD ( 
DD ( 
UD (orientation: landscape) 
DD ( 
DD ( 











@Qmedia (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { ... } 


这 种 方式 兼容 了 所 有 现代 训 览 融 。 当 你 想 在 高 分 辨 座 的 屏 才 上 提供 更 高 清 的 网 帮 或 者 图 标 
时 ,可 以 用 这 种 方法 。 这 样 低 分 辩 座 的 屏 芭 就 不 会 浪费 市 客 去 加 载 大 图 ， 因 为 在 这 些 屏 禹 上 看 不 
出 区 别 。 本 革 稍 后 会 详细 介绍 啊 应 式 图 片 。 


提示 媒体 查询 还 可 以 放 在 <l1ink> 标 签 中 。 在 网 页 里 加 入 <1link rel="stylesheet" 
media=" (min-width: 45em)" href="]arge-screen.css" />， 只 有 当 min-width 
媒体 查询 条 件 满足 的 时 候 才 会 将 large-screen.css 文件 的 样式 应 用 到 页 面 。 然 而 不 管 视 
口 宽度 如 何 ， 样 式 表 都 会 被 下 载 。 这 种 方式 只 是 为 了 更 好 地 组 织 代 码 ， 并 不 会 节省 网 


、 六 写 - 
络 流量 。 


























2. 妹 体 类 型 

最 后 一 个 媒体 查询 的 选项 是 媒体 类 型 ( media type )。 常 见 的 两 种 媒体 类 型 是 screen 和 
print。 使 用 print 媒体 查询 可 以 控制 打印 时 的 网 页 布局 ， 这 样 就 能 在 打印 时 去 掉 背 景 图 〈 了 
省 墨水 )， 隐 藏 不 必要 的 导航 栏 。 当 用 户 打 印 网 页 时 ， 他 们 通 篆 只 想 打 印 主体 内 容 。 

针对 打印 样式 ， 使 用 emedqia print 查询 语句 。 不 需要 像 min-wiaqath 或 者 其 他 媒体 特征 那 
样 加 小 括号 。 同 理 ， 针 对 屏幕 样式 ， 使 用 ameaia screen。 











8.2 ”媒体 查询 189 


考虑 打印 样式 
开发 CSS 的 时 候 ， 通 常 在 事后 才 会 处 理 打印 样式 ， 而 且 只 在 需要 的 时 候 才 会 去 考虑 ， 但 
还 是 有 必要 思考 用 户 是 否 想 要 打印 网 页 的 。 为 了 帮助 用 户 打 印 网 页 ， 需 要 采取 一 些 通用 步骤 。 
大 多 数 情况 下 ， 需 要 将 基础 打印 样式 放 在 @media print {...} 媒 体 查询 内 。 
使 用 display: none 隐藏 不 重要 的 内 容 ， 比 如 导航 菜单 和 页 脚 。 当 用 户 打 印 网 页 时 ， 他 
们 绝 大 多 数 情况 下 只 关心 网 页 的 主体 内 容 。 
还 可 以 将 整体 的 字体 颜色 设置 成 黑色 ,去 掉 文 字 后 面 的 背景 图 片 和 背景 色 。 大 多 数 情况 下 ， 
用 通用 选择 器 就 能 实现 。 下 面 的 代码 使 用 了 !important ,这样 就 不 必 担 心 被 后 面 的 代码 履 盖 。 
Cme ems eon 
i Slack ll1mMo0OrEAanets 
background: none !important; 


} 
| 


花 一 点 时 间 实 现 打 印 样式 就 能 给 用 户 提供 很 棒 的 服务 。 如 果 你 的 网 站 有 很 多 打印 需求 ( 比 
如 食谱 网 站 )， 那 就 应 该 花 更 多 时 间 确 保 所 有 的 打印 样式 正常 。 


8.2.2 ”给 网 页 添加 断 点 


通常 来 说 ， 移 动 优先 的 开发 方式 意味 着 最 常用 的 媒体 查询 类 型 应 该 是 min-wiath。 在 任何 
媒体 查询 之 前 ， 最 先 写 的 是 移动 端 样 式 ， 然 后 设置 越 来 越 大 的 断 点 。 整 体 结构 如 代码 清单 8-8 所 
示 。( 先 别 急 着 将 下 面 的 代码 加 入 网 页 。) 
代码 清单 8-8 啊 应 式 CSS 的 整体 结构 


的 断 点 都 生效 


Gmedla (min-width: 35em) { 
ea 中 等 屏幕 的 断 点 : 覆盖 




















a 对 应 的 移动 端 样 式 
} 
} 


@Qmedia (min-width: 50em) { 
汪汪 过 大 屏幕 断 点 : 覆盖 对 应 的 小 屏幕 
二 和 中 等 屏幕 断 点 的 样式 
} 
} 
最 优先 的 是 移动 端 样式 ， 因 为 它们 不 在 媒体 查询 里 ， 所 以 这 些 样 式 对 所 有 断 点 都 有 效 。 然 后 
是 针对 中 等 屏 间 的 媒体 查询 ,其 中 的 规则 基于 移动 端 样式 构建 并 且 会 覆盖 移动 端 样 式 。 最 后 是 针 
对 大 屏 货 的 媒体 查询 ， 在 这 里 添加 网 页 最 后 的 布局 。 
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有 的 设计 可 能 只 需要 一 个 断 点 ， 有 的 设计 可 能 需要 多 个 断 点 。 对 网 页 上 有 很 多 元 素来 讲 ， 无 
须 给 每 个 断 点 都 添加 样式 , 因为 在 小 屏 算 或 者 中 等 屏幕 的 断 点 下 这 加 的 样式 规则 在 大 屏幕 的 断 点 
下 也 完全 有 效 。 

有 时 候 移动 端的 样式 可 能 很 复杂 , 在 较 大 的 断 点 里 面 需 要 花费 较 大 篇 幅 去 窗 盖 样式 。 此 时 需 
要 将 这 些 样 式 放 在 max-width 媒体 查询 中 ， 这 样 就 只 对 较 小 的 断 点 生效 ,但 是 用 太 多 的 
max-width 媒体 查询 也 很 有 可 能 是 没有 如 循 移动 优先 原则 所 至 max-wigth 是 用 来 排除 某 些 规 
则 的 方式 ， 而 不 是 一 个 常规 手段 。 

接 下 来 给 中 等 屏 疾 断 点 添加 样式 。 在 较 大 的 屏幕 上 ， 可 用 空间 较 多 ， 布 局 可 以 较 宽 松 一 些 。 
在 代码 清单 8-9 中 ， 给 头 部 和 主 元 素 添 加 更 大 的 内 边 距 ， 然 后 单独 给 主 图 加 大 内 边 距 ， 使 它 更 加 
明显 ， 同 时 给 页 面 增加 了 更 多 的 视觉 趣味 。 导 航 染 单 不 必 隐 藏 了 了 ， 要 隐藏 汉堡包 岁 标 ， 并 让 菜单 
项 一 直 显 示 (参见 代码 清单 8-10 )。 最 终 可 以 将 主 内 容 变 成 三 列 布局 (参见 代码 清单 8-11 )， 呆 
将 如 图 8-8 所 示 。 
































WOMBAT COFFEE ROASTERS ~ “一 一 更 大 的 标题 


We love coffee 


本 ”水平 的 菜单 项 





一 更 大 的 主 图 
SINGLE-ORIGIN BLENDS BREWING EQUIPMENT 
We have built partnerships Our tasters have put We offer our favorite 三 列 内 容 
with small farms around the together a selection of kettles, French presses, a = 合 
world to hand-select beans carefully balanced blends. and pour-over cones. 
at the peak of season. We Our famous house blend is Come to one of our 
then carefully roast in small < available year round. brewing classes to learn 
batches to maximize their how to brew the perfect 
potential. pour-over cup. 





图 8-8 ”中 等 屏 戎 断 点 的 网 页 


有 些 改 变 显 而 易 见 ， 比 如 适当 增加 了 内 边 距 和 人 字号。 通常 ,， 最 好 每 次 按照 相关 选择 益 的 规则 
了 立即 对 应 修改 。 简 单 起 抑 ， 我 在 代码 清单 8-9 中 将 代码 合并 了 。 将 以 下 代码 加 入 到 你 的 样式 表 。 


代码 清单 8-9 ”中 等 屏幕 断 点 下 的 内 边 距 和 字体 调整 
.bage-header { 
padding: 0.4em lem; 
background-color: #fff; 
} 
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@Qmedia (min-width: 35em) { 
-page-header { | 增加 尖 部 内 边 距 
padding: lem; 
} 
} 


.hero { 
padding: 2em lem; 
text-align: center; 
background-image: url (coffee-beans.jJpg); 
background-size: 100%; 
COLOr: #f£fff:; 
text-shadow: 0.1em 0.1em 0.3em #000; 
} 


@Qmedia (min-width: 35em) { 增加 主 图 的 内 边 


Us 距 和 字号 
padding: 5em 3em; 


font-size: 1.2rem; 
} 
} 


main { 
padding: lem; 
} 


@Qmedia (min-width: 35em) { 
main { 增加 主 元 素 
padding: 2em lem; 的 内 边 距 
} 
} 


总 是 确保 每 个 媒体 查询 部 位 于 它 要 窗 盖 的 样式 之 后 , 这 样 媒体 查询 内 的 样式 束 会 有 更 局 的 优 
先 级 。 将 浏览 大 从 罕 变 宽 ， 看 看 网 页 宽度 大 于 35em 的 时 候 发 生 的 变化 。 

接 下 来 处 理 采 单 梓 式 。 亲 单 将 涉及 两 处 变化 首先， 要 将 下 拉 有 末 单 的 打开 和 关闭 行为 去 挥 ， 
这 样 才能 始终 保持 可 ; 其 次 ， 要 将 沫 单 从 垂直 排列 改 为 水 平 排列 布局 。 这 两 处 改变 将 一 起 实现 。 
将 代码 清单 8-10 中 的 媒体 查询 代码 块 添 加 到 之 前 写 的 .menu 和 .nav-menu 样式 之 后 。 


代码 清单 8-10 ”为 中 等 屏幕 断 点 重 构 导航 菜 


@Qmedia (min-width: 35em) { 
.menu-toggle f 








display: none; 


| 将 菜单 的 切换 按钮 隐藏 , 让 下 


拉 菜 单 的 内 容 显示 出 来 


.menu-dropdown { 
display: block; 


position: static; 
] 黎 盖 绝对 定位 
} 
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@Qmedia (min-width: 35em) { 
.nav-menu { 
display: flex; 
border: 0; 
padding: 0 lem; 
} 将 菜单 改 为 弹性 容器 ， 让 菜单 
子 元 素 扩 展 ， 填 满 屏幕 宽度 
.nav-menu > 11 { 


flex: 
} 
.nav-menu 

border: 


} 


二 


.Nav-menu 
padding: 


text-align: 


y 
y 


下” 
0 


> ]11 >a 1{ 
0 .3em; 
Center.; 





用 Flexbox 
实现 等 宽 的 


虽然 前 面 为 了 适 配 移动 端 布局 ,给 沫 单 添加 了 很 多 复杂 样式 , 但 我 们 能 够 轻松 地 罗 兰 样式 让 
布局 恢复 到 病人 芒 的 块 级 元 素 。 不 需要 罗 兰 移动 样式 里 的 top、1left 、right 属性 ， 因 为 它们 对 
静态 定位 的 元 素 不 起 作用 。 

用 Flexbox 处 理 列表 项 是 一 个 很 棒 的 方法 ， 它 能 够 让 列表 项 增长 到 填 满 可 用 空间 。 采 单元 系 
的 内 边 距 也 像 其 他 元 系 一 样 所 调整 ,不 过 这 次 是 减 小 了 内 边 距 。 在 中 每 屏 副 断 点 下 ， 可 以 确定 用 
户 不 是 在 小 手机 上 访问 ， 因 此 不 需要 将 点 击 区 域 设 置 得 那么 大 。 


8.2.3 ”添加 响应 式 的 列 


最 后 一 步 是 要 为 中 等 屏幕 断 点 引 和 人 多 列 布 局 。 和 前 面 几 章 构 建 多 列 布局 的 方式 一 样 ， 只 需要 
将 这 些 样式 封装 在 一 个 巡 体 查询 里 ， 这 样 就 不 会 影 啊 到 小 于 这 个 断 点 的 屏幕 设备 。 

写 标 记 的 时 候 ， 给 想 要 加 上 三 列 布局 的 地 方 加 上 row 和 column 类 。 接 下 来 定义 相关 样式 。 
将 代码 清单 8-11 添加 到 样式 表 。 


代码 清单 8-11 在 媒体 查询 内 的 三 列 布局 






































@Qmedia (min-width: 35em) { 
.TOW { 
display: flex; 、 0 ee 
re 使 用 负 的 外 边 距 将 行 容器 扩大 ,补偿 列 的 
. . /7 、 参 岂 A a ce 
margin-right: -.75em; 外 边 距 参见 第 4 章 ，4.5.2 六 ) 
} 


.Column { 
fe 下” 
margin-right: 0.75em 


添加 列 间距 
} 


margin-left: 0.75em; 
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现在 缩放 浏览 需 , 到 达 汤 点 时 三 列 布局 就 会 出 现 。 在 小 于 该 断 点 时 , 这 些 元 素 没 有 任何 样式 ， 
因此 它们 会 按照 目 然 文档 流 的 顺序 自 上 而 下 排列 。 当 大 于 断 点 时 ,这 些 元 又 就 会 变 成 弹性 容 帮 加 
弹性 元 系 。 

许多 响应 式 设 计 吾 循 这 种 方法 : 当 设 计 要 求 元 素 并 排 摆 放 时 , 只 在 大 屏 上 将 它们 摆 放 在 一 行 。 
在 小 屏 下 ， 人 允许 每 个 元 素 单 独 一 行 ， 填 满 屏 幕 宽度 。 这 种 方法 适用 于 列 、 媒 体 对 象 ， 以 及 任意 在 
小 屏 下 容 多 拥挤 的 元 素 。 你 可 能 会 好 奇 为 什么 在 代 但 清单 8-7 中 要 将 断 点 设置 为 35em， 因 为 在 
这 个 宽度 时 ， 三 列 布局 就 开始 显得 拥挤 了 。 本 例 中 小 于 35em 时 ， 每 列 就 太 罕 了 。 

Web 设计 师 Brad Frost 列举 了 一 系列 啊 应 模式 ， 可 以 访问 https://bradfrost.github.io/this-is- 
responsive/patterns.html 查看 。 啊 应 陈设 计 中 的 列 非常 灵活 多 变 ， 比 如 一 冤 一 条 的 列 、 等 宽 的 列 、 
两 列 、 三 列 。 最 终 ， 这 些 列 的 布局 都 会 使 用 类 似 于 本 和 草 的 方式 实现 ,可 能 会 组 合 多 个 列 或 者 更 改 
列 壳 。 

有 时 候 ， 甚 至 不 需要 媒体 查询 ， 目 然 地 折 行 就 能 实现 啊 应 式 的 列 。 可 以 通过 在 Flexbox 布局 
中 使 用 flex-wrap: wrap 并 设置 合适 的 flex-basis 来 实现 。 还 可 以 在 网 格 布局 中 使 用 
auto-fit 或 者 auto-fill 的 网 格 列 ， 在 折 行 之 前 就 可 以 决定 一 行 放 几 个 元 素 。 用 inline-block 
的 元 素 也 行 ， 只 不 过 它们 无 法 扩展 到 项 满 容 从。 


断 点 的 选择 

本 章 开 头 介绍 了 如 何 实现 简单 的 啊 应 式 元 系 ,， 便 于 你 熟悉 媒体 碍 询 的 用 法 。 大 多 数 时 候 , 你 
会 先 使 用 断 点 处 理 多 列 的 设计 。 多 试 几 次 , 直到 找到 适合 页 面 布局 的 断 点 。 要 确保 在 所 选 的 断 点 
Si 1 

有 时候 会 忍 不 住 想 要 根据 设备 选择 断 点 。 这 个 iPhone 7 宽 多 少 像素 ,那个 平板 设备 宽 多 少 像 
系 ， 等 等 。 不 要 总 想 春 设备 。 市 面 上 有 成 日 上 千 中 设备 和 屏 尹 分 辨认 ,无 法 逐一 测试 。 相 反 ， 应 
该 选择 适合 设计 的 断 点 ， 这 样 不 管 在 什么 设备 上 ， 都 能 有 很 好 的 表现 。 












































期 符 : 容 颖 查询 
媒体 查询 基于 视 口 大 小 实现 响应 式 设 计 , 但 是 开发 人 员 和 浏览 器 厂商 已 经 花 了 好 几 年 时 间 
来 寻找 更 好 的 解决 办 法 。 很 多 开发 人 员 硕 望 得 到 的 特性 是 容器 查询 〈 container queries )， 起 初 
叫 作 元 素 查 询 ( element queries )。 
这 种 查询 不 是 响应 视 口 ,而 是 响应 一 个 元 素 的 容器 的 大 小 。 想 想 第 4 章 里 创建 的 媒体 对 象 。 


“3 Change it up 


Don't run the same every time you hit the road. 
Vary your pace, and vary the distance of your 
runs. 





图 文 并 排 的 媒体 对 象 
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在 大 屏 上 因为 有 足够 的 空间 让 图 睫 和 文字 并 排 摆 放 ， 所 以 没 问 题 。 但 是 在 移动 端 第 本 有 
需要 改变 这 个 模式 ， 证 图 片 在 文字 的 上 方 。 


< 





Change it up 


Dont run the same every time 
you hit the road. Vary your 
pace, and vary the distance of 
your runs. 





媒体 对 象 的 堆 全 版本， 更 适合 水 平 空间 有 限 的 情况 


有 了 时候, 在 大 屏幕 断 点 上 也 想 要 这 种 移动 端 布 局 。 比 如 当 这 个 媒体 对 和 象 位 于 一 个 很 罕 的 列 
( 如 代码 清单 8-11 所 示 ): 容器 太 宕 ， 不 适合 元 素 并 排 摆 放 ， 即 使 此 时 视 口 的 宽度 大 于 移动 端 
的 断 点 。 如 果 可 以 根据 容器 的 宽度 而 不 是 视 口 蜗 度 来 定义 媒体 对 象 的 响应 式 行为 ,就 会 更 合适 。 
不 幸 的 是 ,现在 还 不 能 直接 使 用 这 种 查询 方式 。 目 前 要 想 实 现 这 种 布局 ， 只 能 小 心 收 翼 地 构造 
后 代 选 择 器 来 匹配 这 种 场景 (比如 .column .media > .media-image )， 但 是 这 种 方式 非常 
脆弱 。 

想 要 解决 以 上 问题 , 请 继续 关注 容器 查询 的 进展 ,。 浏览 器 要 实现 容器 查询 很 难 ,， 这 也 是 它 
eS 器 查询 或 者 其 他 替代 方案 能 够 早日 为 浏 
览 器 所 支持 。 


一 


8.3 流 陈 布局 


响应 式 设 计 的 第 三 个 也 是 最 后 一 个 原则 是 流 式 布 局 (fluidlayout )。 流 式 布局 ， 有 时 被 称 作 液 
体 布局 (liquid je i 它 跟 固定 布 忆 相反， 固定 布局 的 
列 都 是 用 px 或 者 em 单位 定义 。 固 定 容 器 ( 比如 ， 设 定 了 wiath: 800px 的 元 素 ) 在 小 屏 上 会 
超出 视 口 范围 ， 导 致 需要 水 平 滚动 条 ， 而 流 式 容 央 会 自动 缩小 以 适应 视 口 。 

在 流 式 布局 中 ,主页 面容 器 通常 不 会 有 明确 宽度 ， 也 不 会 给 百 分 比 宽 度 ,全 可 能 会 设置 左 厂 
内 边 距 ,或 者 设置 左右 外 边 中 为 auto， 让 其 与 视 口 边缘 之 间 产 生 留 白 。 也 就 是 说 容器 可 能 比 视 
口 略 窄 ， 但 永远 不 会 比 视 口 宽 。 

在 主 容 需 中 ， 任 何 列 都 用 百分比 来 定义 宽度 〈 比 如 ， 人 这 样 无 

论 屏 医 宽 度 是 多 少 都 能 放 得 下 主 容 占 。 用 Flexbox 布局 也 可 以 ， 设 隆 元 系 的 flex-grow 和 
flex-shrink (更 重要 )， 让 元 素 能 够 始终 填 满 屏幕 。 要 习惯 将 容 锅 宽度 设置 为 百分比 ， 而 不 是 
任何 固定 的 值 。 
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说 明 流 式 容器 在 本 书 其 他 章节 的 例子 中 已 经 出 现 过 ， 实 际 上 ， 整 本 书 中 几乎 只 用 了 
流 式 布 局 。 现 在 你 应 该 已 经 或 多 或 少 熟 悉 这 种 布局 方式 了 。 


网 页 上 默认 束 是 啊 应 式 的 。 没 添加 CSS 的 时 候 ， 块 级 元 系 不 会 比 视 口 宽 ,， 行 内 元 素 会 折 行 ， 从 
而 避免 出 现 水 平 滚动 条 。 加 上 CSS 样式 后 ,就 需要 你 来 维护 网 页 的 响应 式 特性 了 。 这 个 道理 说 着 
容易 做 着 难 ， 而 意识 到 每 次 午 是 从 一 个 好 的 移 认 状态 开始 ， 有 助 于 我 们 更 好 地 实现 啊 应 式 布局 。 


8.3.1 给 大 视 口 汶 加 梓 却 


接 下 来 要 为 下 一 个 屏 芭 断 点 加 上 媒体 查询 ,一边 实 现 一 边 观 察 的 过 程 中 ,就 会 发 现在 每 个 电 
所 处 部 没有 给 容 兹 固定 宽度 。 容 胡可 以 目 然 地 伸展 到 100% ( 减 去 一 些 内 边 距 和 /或 外 边 距 ),。 在 
三 列 布局 的 时 候 使 用 了 Flexbox， 证 每 一 列 占据 视 口 宽度 的 三 分 之 一 。 

大 视 口 下 的 网 页 布局 最 终 效 来 如 图 8-9 所 示 。 类 似 于 中 每 屏幕 视 口 ， 只 是 可 用 空间 更 多 了 了。 
现在 可 以 随意 使 用 内 边 距 ， 这 正 是 接 下 来 要 做 的 事情 。 


WOMBAT COFFEE ROASTERS 


We love coffee 


~ | 一 | i 、 
3 
NO 更 大 的 主 图 
Welcome to Wombat Coffee\Roasters! We are passionate’about our craft,‘striving to*bring you the best .hand-crafted coffee 4 
a » 






































in the ity. 





SINGLE-ORIGIN BLENDS mh 
BREWING EQUIPMENT 网 风 边 绿 的 | 为 

We have built partnerships with small farms around Our tasters have put together a selection of We offer our favorite kettles, French presses, and J 边 中 更 大 下 

the world to hand-select beans at the peak of carefully balanced blends. Dur famous house pour-over cones. Come to one of our brewing - 

season. We then carefully roast in small batches blend is available year round. classes to learn how to brew the perfect pour-over 

to maximize their potential. cup. 





图 8-9 大 视 口 下 的 网 页 布局 


左右 内 边 距 从 lem 加 到 了 4em。 主 图 上 的 文字 周 于 的 内 边 距 也 增加 了 ， 这 样 图 片 可 以 更 大 。 
新 增 样式 如 代码 清单 8-12 所 示 。 

将 所 有 的 (min-wiath: 50em ) 媒体 查询 代码 放 到 样式 表 中 。 请 再 次 确认 将 相同 的 规则 放 
到 较 小 的 断 点 后 面 (如 .page-header、.hero、main )， 这 样 媒 体 查 询 内 的 这 些 样式 才能 覆盖 
前 面 断 点 内 的 样式 。 


代码 清单 8-12 ”在 大 屏 的 断 点 处 增加 内 边 距 


Gmedla (min-width: 50em) { 
.page-header { 
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padding: lem 4em; 
} 
} 


@Qmedia (min-width: 50em) { 
.hero { 
padding: 7em 6em; 
} 


， 网 页 左右 内 边 距 
增加 到 4em 


@Qmedia (min-width: 50em) { 
main { 
padding: 2em 4em; 
} 
} 


@Qmedia (min-width: 50em) { 
.nav-menu { 
padding: 0 4em; 
} 
} 


更 大 的 主 图 ， 更 大 
的 主 图 内 边 距 





还 需要 最 后 一 点 调整 。 现 在 根 元 素 的 啊 应 式 字 号 为 font-size: calc(1vm + 0.6em)， 
在 大 屏 上 就 显得 太 大 了 ， 可 以 在 最 大 的 断 点 处 给 字号 加 一 个 上 限 。 如 代码 清单 8-13 所 示 更 新 样 
3 


代码 清单 8-13 设置 啊 应 式 字 号 的 上 限 
:root { 
box-sizing: border-box; 





font-size: calc(lvw + 0.6em); 


} 


@Qmedia (min-width: 50em) { 超过 最 大 断 点 时 


: 七 和 
SA 字号 不 再 增长 
font-size: 1.125em; 





} 
’ 


现在 你 已 经 实现 了 一 个 拥有 三 个 断 点 的 啊 应 式 网 页 。 继 续 在 上 面试 验 ， 改变 断 点 的 冤 度 ,看 
看 浏览 体验 会 发 生 什么 变化 。 


8.3.2 ”处 理 表格 


在 移动 设备 的 流 式 布局 里 , 表格 的 问题 特别 多 。 如 果 表 格 的 列 太 多 , 很 容易 超过 屏幕 宽度 ( 如 
图 8-10 所 示 )。 
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Tasting 


Dark 
Nicaragua | Matagulpa chocolate, | $13. 
almond 
Ethiopia | Yirgacheffe | Sweettea, | $15 
P 8 blueberry 
jasmine 
图 8-10 ”表格 的 右边 在 移动 设备 上 被 裁 据 了 


如 果 可 以 的 话 , 建议 在 移动 设备 上 用 别 的 方式 组 织 数 据 。 比 如 将 每 一 行 数据 单独 用 一 块 区 域 
展示 ,让 每 块 区 域 顺 序 车 放 ， 或 者 用 更 适合 小 屏 的 可 视 化 图 形 或 者 图 表 展 示 。 但 是 ， 有 了 时候 就 是 
需要 用 表格 。 

有 一 个 办 法 是 将 表格 强制 显示 为 一 个 普通 的 块 级 元 素 ， 如 图 8-11 所 示 。 




















Nicaragua 
Matagulpa 
Dark chocolate, almond 


$13.95 





Ethiopia 
Yirgacheffe 

Sweet tea, blueberry 
$15.95 


Ethiopia 
Nano Challa 


Tangerine, jasmine 


$14.95 








图 8-11 表格 式 的 数据 ， 但 对 每 一 行 和 单元 格 都 使 用 了 aisplay: block 


这 个 布局 由 <table>、 0 “ta 元 条 组成， 但 是 我 们 对 它们 使 用 了 display: block 声 
明 ， 禾 盖 了 正常 的 table 、table-row 、table-cell 的 显示 值 。 可 以 用 max-wiatn 媒体 查询 限制 在 小 
屏 下 才 改 变 表格 元 素 的 显示 。CSS 代码 如 代码 清单 8-14 所 示 。( 可 以 将 代码 应 用 到 任意 <table> 
标签 查看 效果 。) 


代码 清单 8-14 在 移动 设备 上 实现 表格 的 啊 应 式 布局 
table { 
width: 100%; 
} 
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Gmedla (max-width: 30em) { 


table, thead, tbody, tr, th, td { 、 
Rn -| 让 表格 的 所 有 元 素 


) 都 显示 为 块 级 
thead tr { 

position: absolute; 

top: -9999px; 将 表 头 移 到 屏幕 

left: -9999px; 外 ， 将 其 隐藏 


) 集合 之 间 加 上 间隔 

} 

以 上 样式 让 每 个 单元 格 从 上 到 下 排列 ， 并 且 在 每 个 <tr> 之 间 庄 加 了 外 边 跑 ， 但 是 这 样 会 让 
<thead> 行 不 再 跟 下 面 的 每 一 列 对 齐 , 因此 要 用 绝对 定位 将 头 部 移出 视 口 。 出 于 可 访问 性 的 缘故 ， 
我 们 没有 用 aisplay: none， 这 样 屏 大 阅读 作 能 够 读 到 表 头 。 虽 然 不 是 完美 的 解决 办 法 ,但 是 
当 其 他 方式 失效 的 时 候 ， 这 就 是 最 好 的 方式 。 


8.4” 咽 应 式 图 片 


在 啊 应 式 设计 中 ,图 厂 需 要 特别 关注 。 不仅 要 让 图 片 适 应 屏 偶 ,还 要 考虑 移动 器用 户 的 市 宽 
限制 。 图 片 通常 是 网 页 上 最 大 的 资源 。 自 和 完 要 保证 图 片 充 分 压缩 。 在 图 片 编辑 从 中 选择 “Save for 
Web” 选 项 能 够 极 大 地 减 小 图 片 体积 ， 或 者 用 别 的 图 请 压 缩 工具 压缩 图 片 ， 比 如 tinypng 网 站 。 

还 要 避 倪 不 必要 的 局 分 辩 座 图片 ,而 是 否 必要 则 取决 于 视 口 大 小 。 也 没有 必要 为 小 屏幕 提供 
大 图 ， 因 为 大 图 最 终 会 被 纯 小 。 


8.4.1 不 同 视 口 大 小 使 用 不 同 的 图 片 


啊 应 式 图 片 的 最 佳 实践 是 为 一 个 图 片 创建 不 同 分 辨 率 的 副本 。 如果 用 媒体 查询 能 够 知道 屏幕 
的 大 小 ， 就 不 必 发 送 过 大 的 图 片 ， 不 然 浏览 器 为 了 适 配 图 片 也 会 将 其 缩小 。 

使 用 啊 应 式 技术 给 不 同 屏幕 尺寸 提供 最 合适 的 图 片 。 比 如 ， 处 理 网 页 主 图 的 CSS， 如 代码 清 
单 8-15 所 示 。 将 这 有 段 代码 添加 到 样式 表 。 


代码 清单 8-15 ”添加 啊 应 式 的 背景 图 


tr { a 
margin-bottom: lem; | 在 表格 数据 的 每 一 个 






































.hero { 
> Re 给 移动 设备 提供 
ext-align: Sn SA 最 小 的 图 
background-image: url(coffee-beans-small.]jJpg); 


background-size: 100%; 
Color: #f£fff; 
text-shadow: 0.lem 0.1em 0.3em #000; 
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@Qmedia (min-width: 35em) { 
.hero { 


paddings Sem 38m 给 中 等 屏幕 提供 
font-size: 1.2rem; 稍 大 的 图 
url(coffee-beans-medium.jJpg); 


background-image: 
} 
} 


@Qmedia (min-width: 50em) { 


ke { 给 大 屏幕 提供 完整 
padding: 7em 6bem; 分 辨 率 的 图 
url (coffee-beans.jpg); 


background-image: 
} 
} 


在 不 同 屏 几 的 训 览 希 上 加 载 这 样 的 网 页 ， 根 本 看 不 出 有 什么 区 别 。 这 台 是 关键 所 在 。 在 小 断 
点 下 ， 屏 卉 太 才 不 够 宽 ,， 反 正 显 示 不 了 完整 分 辨 率 的 网， 但 是 能 节省 几 百 KB 的 流量 。 在 图 片 较 
多 的 网 中 上， 累计 刷 省 的 流量 就 能 够 显 千 提升 网 页 加 载 速 度 。 


8.4.2 ”使 用 srcset 提 供 对 应 的 图 片 


媒体 查询 能 够 解决 用 CSS 加 载 图 片 的 问题 ,但 是 HTML 里 的 <img> 标 签 怎 么 办 呢 ? 对 于 这 
种 行内 图 片 ， 有 男 一 个 重要 的 解决 方法 : srcset 属性 (“source set” 的 缩写 )。 

这 个 属性 是 HTML 的 一 个 较 新 的 特性 。 它 可 以 为 一 个 <img> 标 签 指定 不 同 的 图 片 URL， 并 
指定 相应 的 分 辨认 。 浏 览 硕 会 根据 目 身 需要 决定 加 载 哪 一 个 图 片 〈 如 代码 清单 8-16 所 示 )。 


代码 清单 8-16 ” 啊 应 式 srcset 图 片 


<img alt="A white coffee mug on a bed of coffee beans'" 



































给 不 支持 srcset 的 浏览 
器 提供 常规 的 src 属性 
(比如 IE 和 Opera Mini) 


src="coffee-beans-small.jpg" 
srcset="coffee-beans-small.jpg 560w 


每 个 图 片 的 URL 
和 它 的 宽度 


coffee-beans-medium.]jJpg 800w, 





coffee-beans.Jpg 1280w" 
/> 


现在 大 多 数 浏 览 套 文 持 srcset。 不 文 持 的 浏览 硕 会 根据 src 属性 加 载 相 应 的 URL。 这 种 方 
式 人 允许 针对 不 同 的 屏 右 尺寸 优化 图 厂 。 更 样 的 是 , 浏览 絮 会 针对 高 分 辩 率 的 屏 妖 做 出 调整 。 如 来 
设备 的 屏 禹 像素 密度 是 2 售 ， 六 览 帮 就 会 相应 地 加 载 更 融 分 辨识 的 图 片 。 

有 关 啊 应 式 图 片 的 更 多 内 容 ， 请 访问 jakearchibald 网 站 上 的 文章 The Anatomy of Responsive 
Images。 这 篇 文章 还 介绍 了 其 他 有 用 的 选项 ， 例 如 根据 加 载 的 图 片 调整 显示 的 大 小 。 


提示 图片 作 为 流 式 布局 的 一 部 分 ， 请 始终 确保 它 不 会 超过 容器 的 宽度 。 为 了 避免 这 种 
情况 发 生 ， 一 劳 永 选 的 办 法 是 在 样式 表 加 入 规则 img { max-width: 100%; }。 


网 页 啊 应 式 设计 的 结构 实现 方式 和 干 变 万 化 。 最 终 这 些 方式 都 会 归纳 为 三 大 原则 : 移动 优先 、 
媒体 查询 、 流 式 布 局 。 
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8.5 总结 


口 优先 实现 移动 端 设计 。 

口 使 用 媒体 查询 ， 按 照 视 口 从 小 到 大 的 顺序 渐进 增强 网 页 。 
口 使 用 流 式 布局 适应 任意 浏览 右 尺 寸 。 

口 使 用 啊 应 式 图 片 适应 移动 设备 的 融 宽 限制 。 

口 不 要 忘记 给 视 口 添加 meta 标签 。 





第 三 部 分 


大 型 应 用 程序 中 的 CSS 








代码 不 仅 是 与 计算 机 的 交流 , 而 且 还 是 与 使 用 该 代码 的 其 他 开发 人 员 的 
交流 。 掌握 浏览 侨 如 何 演 染 CSS 很 重要 , 了 解 如 何在 项 目 中 编写 和 组 织 CSS 
也 很 重要 。 这 一 部 分 (第 9 章 和 第 10 章 ) 将 展示 如 何 组 织 CSS 代码 ,使 其 
更 易于 理解 和 维护 。 





模块 化 CSS 





本 草 概要 

口 项 目 规模 持续 增长 时 出 现 的 问题 
口 使 用 模块 组 织 CSS 代码 

口 避免 提升 选择 从 的 优先 级 

口 幸 人 研 流行 的 CSS 方 法 论 





在 第 一 部 分 和 第 二 部 分 ， 我 们 明白 了 CSS 的 一 些 星 涩 难民 的 概念 ， 掌 握 了 CSS 提供 的 控制 
网 页 元 素 布 局 的 工具 。 我 们 也 了 解 了 盒 模型 、 外 边 距 折 三 、 层 琶 上 下 文 、 浮 动 和 Flexbox。 这 些 
技术 对 于 新 建 项 目 尤 其 重要 。 然 而, 在 实际 的 软件 开发 过 程 中 , 我 们 的 时 间 和 精力 不 仅 花 在 写 新 
代码 上 ， 还 要 用 于 持续 更 新 和 维护 现 有 代码 。 对 于 CSS 来 说 ， 这 就 带 来 了 一 堆 新 问题 。 

修改 现 有 样式 的 时 候 , 受 影响 的 页 面 和 元 素 是 不 确定 的 。 有 个 老 笑话 是 这 么 说 的 : 两 个 CSS 
属性 走 进 了 一 间 酒 吧 ， 结 果 另 一 间 酒 吧 里 的 高 脚 颂 摔 倒 了 。 那 么 问题 来 了 : 要 怎么 确保 修改 的 影 
啊 范 围 和 预期 一 致 呢 ? 怎样 才能 不 影响 我 们 不 想 修改 的 那些 元 素 ? 

本 部 分 将 讨论 这 些 问 题 。 我 们 会 谈 到 CSS 架构 ， 但 不 会 过 多 涉及 具体 样式 的 书写 ， 而 是 更 
多 地 关注 CSS 选择 器 和 匹配 的 HTML 元 素 。 如 何 组 织 代码 结构 ， 决 定 了 后 续 能 否 安全 地 修改 代 
码 ， 而 不 会 有 副作用 。 我 们 从 理解 模块 化 CSS 开始 ， 这 是 本 章 的 重点 。 

模块 化 CSS ( Modular CSS ) 是 指 把 页 面 分 割 成 不 同 的 组 成 部 分 ， 这些 组 成 部 分 可 以 在 多 种 
上 下 文中 重复 使 用 ， 并 且 互 相 之 间 没 有 依赖 关系 。 最 终 目 的 是 ， 当 我 们 修改 其 中 一 部 分 CSS 时 ， 
不 会 对 其 他 部 分 产生 意料 之 外 的 影响 。 

这 跟 组 合家 具 的 原理 类 似 。 例 如 , 宜家 厨房 不 是 建造 一 个 大 型 的 橱柜 单元 ， 而 是 设计 成 各 种 
独立 的 小 件 , 让 顾客 可 以 任 选 购买 。 这 些小 件 看 上 去 风格 一 致 , 组 合 起 来 也 会 很 和 谐 。 这 样 一 来 ， 
顾客 就 可 以 在 布置 的 时 候 把 这 些小 件 随 意 摆 放 到 自己 喜欢 的 位 置 。 模 块 化 CSS 也 是 这 样 ， 它 不 
是 直接 编写 一 个 大 型 网 页 ， 而 是 编写 页 面 的 每 个 部 分 ， 然 后 按照 你 需要 的 效果 组 合 在 一 起 。 

在 计算 机 科学 中 , 编写 模块 化 代码 并 不 是 什么 新 潮 的 做 法 , 但 开发 人 员 近 几 年 才 开始 将 其 引 
入 CSS。 随 着 现代 网 站 和 Web 应 用 程序 体 量 越 来 越 大 、 越 来 越 复 杂 ， 我 们 不 得 不 寻找 一 些 方法 
来 管理 日 益 庞大 日 繁杂 的 样式 表 。 

之 前 的 样式 表 可 以 使 用 选择 需 在 页 面 上 随意 修改 , 模块 化 的 样式 则 人 允许 开发 人 员 添 加 一 些 限 
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制 。 我 们 把 样式 表 的 每 个 组 成 部 分 称 为 模块 (module )， 每 个 模块 独立 负责 自己 的 样式 ， 不 会 影 
啊 其 他 模块 内 的 样式 。 也 就 是 说 ,在 CSS 里 引入 了 软件 封 双 的 原则 。 


封装 (encapsulation ) 相关 的 函数 和 数据 集合 在 一 起 组 成 对 象 ， 通 常用 来 隐藏 


结构 化 对 象 内 部 的 状态 或 值 ， 从 而 使 外 部 因素 不 能 操作 对 象 内 部 。 











CSS 中 没有 数据 和 传统 函数 的 概念 , 但 是 有 选择 硕 及 其 命中 的 页 面 元 妹 。 为 了 达到 封装 的 目 
的 ， 这 些 会 成 为 模块 的 组 成 部 分 ， 并 且 每 个 模块 都 只 负责 少量 的 DOM 元 系 的 样式 。 

有 了 封 猴 的 思想 ， 我 们 台 可 以 为 页 面 上 那些 彼此 分 立 的 组 件 定义 模块 了 ， 像 导航 腔 单 、 对 话 
框 、 进 度 条 、 织 略图 , 等 等 。 可 以 通过 为 DOM 元 系 设 置 一 个 独一无二 的 的 类 名 来 识别 每 个 模块 。 
同时 ， 每 个 模块 包含 一 系列 子 元 隶 ， 构 建成 页 面 上 的 组 件 。 模 块 内 部 可 以 时 套 其 他 模块 ， 最 终 构 
成 完整 的 页 面 。 


9.1 基础 样式 : 打 好 基础 


开始 写 模 块 化 样式 之 前 , 需要 先 配 置 好 环境 。 每 个 样式 表 的 开头 都 要 写 一 些 给 整个 页 面 使 用 
的 通用 规则 ,模块 化 CSS 也 不 例外 。 这 些 规则 通 第 被 称 为 基础 样式 ， 其 他 的 样式 是 构建 在 这 些 
基础 样式 之 上 的 。 基 础 样式 本 号 并 不 是 模块 化 的 ,但 它 会 为 后 面 编写 模块 化 样式 打 好 基础 。 

新 建 一 个 网 页 和 一 个 样式 表 , 把 代码 清单 9-1 中 的 基础 样式 粘贴 到 CSS 中 。 这 里 只 是 列举 了 
你 可 能 用 到 的 一 些 基础 样式 。 


代码 清单 9-1 添加 基础 样式 
:root { 
box-sizing: border-box; 


} 




















x ， 重 置 盒 模型 大 小 

*, ;before, (参见 第 3 章 ) 

*.:after { 
box-sizing: inherit; 

} 

body { 设置 页 面 默 认 使 
font-family: Helvetica, Arial, sans-serif; 用 的 字号 


} 

其 他 常用 的 基础 样式 还 包括 链接 的 凑 色 、 标 题 的 样式 、 外 边 距 等 。<body> 标 签 默 认 的 外 边 
中 很 小 ,你 可 能 会 考虑 将 它 的 外 边 距 去 挥 。 根据 项 目的 实际 情况 ,你 也 可 能 想 为 表单 字段 、 表 格 
和 列表 等 添加 一 些 样式 。 

提示 “这 里 推荐 一 个 叫 作 normalize.css 的 库 ， 这 个 小 样式 表 可 以 协助 消除 不 同 的 客户 端 

浏览 器 演 染 上 的 不 一 致 。 可 以 从 https://necolas.github.io/mormalize.css/ 下 载 该 库 ， 然 后 添 

加 到 自己 的 样式 表 前 面 作 为 基础 样式 的 一 部 分 。 
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基础 样式 应 该 是 通用 的 ,只 添加 那些 影响 页 面 上 大 部 分 或 者 全 部 内 容 的 样式 。 选 择 带 不 应 该 
使 用 类 名 或 者 ID 来 匹配 元 素 ， 应 只 用 标签 类 型 或 者 偶尔 用 用 伪 类 选择 和亲。 核心 思想 是 这 些 基 
样式 提供 了 一 些 先 认 的 泻 染 效 末 ， 但 是 之 后 可 以 很 方便 地 根据 需要 才 兰 基础 样式 。 

基础 样式 配置 完成 以 后 ， 很 少 会 再 修改 。 我 们 会 在 基础 样式 的 稳定 表现 之 上 ， 构 建 模块 化 
CSS。 在 样式 表 中 ， 基 础 样式 后 面 的 内 容 将 主要 由 各 种 模块 组 成 。 


9.2 一 个 简单 的 模块 


下 面 来 创建 一 个 短 消 息 通 知 的 模块 。 每 个 模块 都 需要 一 个 独一无二 的 名 称 , 我 们 把 这 个 模块 
叫 作 “message”。 为 了 吸引 用 户 的 注意 ， 可 以 加 上 一 些 颜色 和 边框 效果 ( 如 图 9-1 所 示 )。 


Save successful 


图 9-1 消息 模块 
这 个 模块 使 用 一 个 类 名 为 message 的 div 作为 标记 。 将 代码 清单 9-2 添加 到 网 页 中 。 
代码 清单 9-2 为 消息 模块 添加 标记 


<div class="message"> 


EE 























Save successful 
</div> 


模块 的 CSS 是 一 个 规则 集 ， 通 过 类 名 指 回 模块 。CSS 中 设置 了 内 边 距 、 边 框 、 边 框 圆 角 和 
颜色 。 把 代码 清单 9-3 添加 到 样式 表 中 ， 放 在 基础 样式 后 面 ， et 
块 了 。 


代码 清单 9-3 ”实现 消息 模块 
.message { 


通过 类 名 指 记 
ee 通过 类 名 指向 


消息 模块 


border-radius: 0.2em; 

border: lpx soliqd #265559; 

Color: #265559;，; 

background-color: #e0f0Of2; 
} 


你 应 该 很 训 悉 这 些 属性 , 至 少 现在 看 上 去 没什么 特别 之 处 , 就 跟 你 在 本 书 里 看 到 的 其 他 CSS 
代码 差不多 。 实 际 上 ， 我 们 写 过 的 代码 里 有 很 多 是 符合 模块 化 CSS 的 原则 的 ， 只 是 之 前 没有 注 
意 轩 了 。 下 面 来 分 析 一 下 这 些 CSS 是 如 何 模块 化 的 。 

模块 的 选择 器 由 单个 类 名 构成 , 这 非常 重要 。 选择 器 里 没有 其 他 规则 来 约束 这 些 样式 仅 作用 
在 页 面 上 的 某 个 地 方 。 对 比 一 下 ， 如 果 使 用 小 尖 亿 于 sidebar .Message 的 选择 融 ， 就 意味 
者 这 个 模块 只 能 用 在 #sigdebar 元 素 内 部 ,没有 这 些 约 束 ， oa 任意 上 下 文中 重复 使 用 。 

通过 给 元 素 谎 加 类 名 ， 就 可 以 把 这 些 样式 复 用 到 很 多 场景 ， 比 如 针对 表单 输入 给 用 户 反 馈 ， 
提供 醒目 的 帮助 文字 ， 或 者 提醒 用 户 注 意 免 责 声 wa。 使 用 相同 的 组 件 ， 就 产生 了 一 套 风 格 
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一 致 的 UI。 所 有 用 到 组 件 的 地 方 将 看 上 去 一 样 ， 不 会 出 现 有 的 地 方 蓝 绿色 有 人 色差 、 有 的 地 方 内 
边 距 俩 大 等 问题 。 

我 曾经 在 CSS 没有 模块 化 的 项 目 里 工作 过 。 其 中 有 一 个 项 目 中 出 现 了 好 几 个 相似 的 按钮 : 
.Save-form button、 .login-form button 和 .toolbar -OO Ls Uttorie 样式 表 里 多 
次 出 现 相 同 的 代码 , 尽管 并 不 是 完全 的 复制 。 重复 是 为 了 获得 一 致 的 体验 , 但 是 随 着 时 间 的 推移 ， 
不 同 的 按钮 之 间 还 是 发 生 了 一 些 不 一 样 的 改变 。 因 此 , 有 的 按钮 内 边 距 稍 有 不 同 , 有 的 按钮 红 得 
更 鲜艳 。 

解决 办 法 就 是 把 按钮 重 构成 一 个 可 复 用 的 模块 , 不 受 页 面 位 置 的 限制 。 创建 模块 不 但 可 以 精 
简 代 码 〈 减少 重复 )， 还 可 以 你 证 视 党 一 致 性 。 这 样 看 上 去 更 专业 ， 不 会 给 人 仓促 堆砌 的 感觉 。 
用 户 在 潜意识 里 也 会 更 容易 相信 我 们 的 应 用 程序 。 


9.2.1 模块 的 变 体 


保持 一 致 性 确实 不 错 , 但 有 时 候 需要 特意 避免 一 致 。 上 面 的 消息 模块 很 好 用 ,但 某 些 情况 下 
我 们 需要 它 看 起 来 有 些 不 同 。 比 如 ,我们 需要 显示 一 条 报错 的 消息 ,这 时 候 应 该 使 用 红色 而 不 是 
之 前 的 蓝 绿色 。 再 比如 , 我 们 可 能 想 要 区 分 传递 信息 的 消息 和 表示 操作 成 功 的 通知 (比如 保存 成 
功 )。 这 可 以 通过 定义 修饰 符 (modifiers ) 来 实现 。 

通过 定义 一 个 以 模块 名 称 开 头 的 新 类 名 来 创建 一 个 修饰 待 。 例 如 ， 消 息 模 块 的 error 修饰 
符 应 该 叫 作 message-error。 通 过 包含 模块 名 称 ， 可 以 清楚 地 表明 这 个 类 属于 消息 模块 。 


说 明 第 用 的 写法 是 使 用 两 个 连 字 符 来 表示 修饰 符 ， 比 如 message--error。 
下 面 我 们 为 模块 创建 三 个 修饰 符 : 成 功 、 警 告 和 错误 。 将 代码 清单 9-4 添加 到 样式 表 中 。 
代码 清单 9-4 ”市 修饰 符 类 名 的 消息 模块 












































.message { 
Dadaine: ,O08enm, | .Ze 加 | 基础 消息 模块 
border-radius: 0.2em; 
border: lpx solid #265559; 
Color: #265559; 
background-color: #e0f0Of2; 
} 


.message--success { & ee 
COlor: #2f5926; 0 
border-color: #2f5926; 
background-color: #cfe8c9; 

} 

0 和 个 信和 

, 成 了 黄色 


border-color: #594826; 
background-color: #e8dec9,，; 


: 
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.message--error { 
Color: #59262f; 
border-color: #59262f; 
background-color: #e8c9cf; 


} 

修饰 符 的 样式 不 需要 重新 定义 整个 模块 ， 只 需 才 兰 要 改变 的 部 分 。 在 本 例 中 , 这 意味 春 只 需 
要 修改 文本 、 边 框 和 背景 的 颜色。 

如 代码 清单 9-5 所 示 , 把 主 模块 类 名 和 修饰 符 类 名 同时 添加 到 元 素 上 , 束 可 以 使 用 修饰 符 了 。 
这 样 既 应 用 了 模块 的 坎 认 样式 ， 又 可 以 在 有 需要 的 时 候 利 用 修饰 符 重 与 部 分 样式 。 


代码 清单 9-5 ”使 用 了 错误 修饰 符 的 消息 模块 的 示例 
<div class="message message--error"> 把 模块 和 修饰 符 的 类 
Invalid password 名 都 添加 到 元 素 上 


错误 修饰 符 变 


成 了 红色 








</div> 


同样 ， 有 需要 时 也 可 以 使 用 成 功 或 警告 修饰 符 。 这 些 修饰 符 只 是 改变 了 模块 的 颜色 , 但 其 他 
的 修饰 符 可 能 会 改变 模块 的 大 小 甚至 布局 。 


1. 按钮 模块 的 变 体 

下 面 创建 另 一 个 带 有 一 些 变 体 的 模块 。 我们 将 实现 一 个 按钮 模块 ,其 中 包含 大 小 和 颜色 选项 
的 变 体 ( 如 图 9-2 所 示 )。 我 们 可 以 用 不 同 的 颜色 为 按钮 添加 视觉 意义 。 绿 色 代 表 积 极 的 行为 ， 
比如 保存 和 提交 表单 ;红色 意味 着 警告 ， 有 利于 防止 用 户 不 小 心 点 击 取消 按钮 。 


图 9-2 使 用 了 不 同 的 尺寸 和 颜色 修饰 特 的 按钮 


代码 清单 9-6 给 出 了 这 些 按钮 的 样式 ， 包 括 基础 按钮 模块 和 四 个 修饰 符 类 : 两 个 尺寸 修饰 符 
和 两 个 颜色 修饰 符 。 将 这 些 代 但 沃 加 到 样式 表 中 。 


代码 清单 9-6 ”按钮 模块 和 修饰 符 

















.button { 
padding: 0.5em 0.8em; 基础 按钮 样式 
border: lpx solid #265559，; 


border-radius: 0.2em; 
background-color: transparent.; 
font-size: lrem; 


} 


.button--success { 、 
乡 和 成 
border-color: #cfe8c9; 下 罗 区 本 


GOLOLP: -#3 
background-color: #2f5926; 
| 
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.button--danger { 红色 的 危险 颜 
border-color: #e8c9c9,; 色 变 体 
Color: #f£fff; 
background-color: #a92323; 

} 

.button--small { 
font-size: 0.8rem; | 小 号 变 

} 

.button--large { 
fn ze. .1 Di | 大 号 变 体 


} 





尺寸 修饰 符 能 够 设置 字体 的 大 小 。 在 第 2 章 我 们 使 用 过 这 个 技巧 : 通过 更 改 字号 来 调整 元 素 
相对 单位 em 的 大 小 ， 进 而 改变 内 边 距 和 边框 圆 角 的 大 小 ， 而 不 需要 重 写 已 经 定义 好 的 值 。 

提示 “要 把 一 个 模块 所 有 的 代码 集中 放 在 同一 个 地 方 ， 这 样 一 个 接 一 个 的 模块 就 会 组 成 

我 们 最 终 的 样式 表 。 

有 了 这 些 修饰 符 ， 写 HTML 的 时 候 就 有 了 多 种 选择 。 我 们 可 以 根据 按钮 的 重要 程度 来 添加 
修饰 符 类 ， 修 改 按钮 的 大 小 ， 也 可 以 选择 用 不 同 的 颜色 来 为 用 户 提 供 语 境 意义 。 

代码 清单 9-7 里 的 HTML 组 合 使 用 修饰 符 来 创建 多 个 按钮 。 将 这 些 代 码 添 加 到 页 面 , 并 查看 
实际 效果 。 


代码 清单 9-7 使 用 修饰 符 创 建 多 种 类 型 的 按钮 


带 大 号 按钮 修饰 
TH 带 成 功 按钮 修饰 
<button class="button button--large">Read more</button> 符 的 按钮 模块 


<button class="button button--success">Save</button> 
<button class="button button--danger button—small">Cancel</button> se 





带 危险 和 小 号 按钮 修 
饰 符 的 按钮 模块 
这 里 的 第 一 个 按钮 是 大 号 的 。 第 二 个 按钮 是 绿色 ,代表 操作 成 功 的 颜色 。 第 三 个 按钮 有 两 个 
修饰 符 : 一 个 是 改变 颜色 ( 人 危险 修饰 符 ), 一 个 改变 大 小 (小 号 修饰 符 )。 最 终 效 来 如 图 9-2 所 示 。 
双 连 字符 的 写法 可 能 看 起 来 有 点 儿 多 余 , 但 当 我 们 开始 创建 名 称 很 长 的 模块 的 时 候 ， 比 如 时 
航 麻 单 或 者 文章 摘要 ， 好 处 就 显现 出 来 了 。 为 这 些 模块 添加 修饰 符 后 ， 类 名 将 如 nav-menu-- 
ey de oe Ml PUull-quote--dark。 
双 连 字符 的 写法 很 容易 区 分 哪 部 分 是 模块 名 称 , 哪 部 分 是 修饰 符 。nav-menu--horizontal 
和 nav--menu-horizontal 分 别 代表 了 不 同 的 含义 。 这 样 一 来 ， 即 使 项 目 里 有 很 多 名 称 相 似 的 
模块 ， 也 很 容易 分 辨 它们 。 
说 明 这 种 双 连 字符 的 写法 是 从 一 个 叫 BEM 的 CSS 命名 规范 流行 起 来 的 。 本 章 快 结束 
的 时 候 ， 会 介绍 BEM 和 其 他 一 些 类 似 的 方法 论 。 
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2. 不 要 使 用 依赖 语 境 的 选择 器 

假设 我 们 正在 维护 一 个 网 站 ,里面 有 小 色 调 的 下 拉 六 单 。 有 一 天 老板 说 ,网 页 涉 部 的 下 拉 有 六 
单 需 要 改 成 市 日 色 文 本 的 深 色调 。 

如 果 没 有 模块 化 CSS， 我 们 可 能 会 使 用 类 似 于 .page-header .dropdown 的 选择 人 各， 先 选 
中 要 修改 的 下 拉 末 单 ,然后 通过 选择 癌 写 一 些 样式 , 覆 新 dropdown 类 提供 的 默认 颜色 。 现 在 要 
写 模 块 化 CSS, 这 样 的 选择 希 是 严格 禁用 的 。 虽 然 使 用 后 代 选 择 希 可 以 满足 当下 的 需要 , 但 接 下 
来 可 能 会 涡 来 很 多 问题 。 下 面 我 们 来 分 析 一 下 。 

第 一 ,我们 必须 考虑 把 这 段 代码 放 在 哪里 , 是 和 网 页 头 部 的 样式 放 在 一 起 ,还 是 跟 下 拉 沫 单 
的 样式 放 在 一 起 ? 如 采 我 们 添加 太 多 类 似 的 单一 目的 的 规则 , 样式 之 间 坚 无 关联 , 到 最 后 样式 表 
会 变 得 人 杂乱无章。 并 且 ， 如 采 后 面 需要 修改 样式 ， 你 还 能 想起 来 它们 放 在 哪里 吗 ? 

第 二 ， 这 种 做 法 提升 了 选择 硕 优 先 级 。 当 下 次 需要 修改 代码 的 时 候 ,我 们 震 要 满足 或 者 继续 
提升 优先 级 。 

第 三 , 后 面 我 们 可 能 需要 在 其 他 场景 用 到 深 色 的 下 拉 列 表 。 刚才 创建 的 这 个 下 拉 列 表 是 限定 
在 网 页 头 部 使 用 的 。 如 有 果 侧 边栏 也 需要 同样 的 下 拉 列 表 , 我 们 就 得 为 该 规则 集 添加 新 的 选择 需 来 
匹配 两 个 场景 ， 或 者 完整 地 复制 一 近 样 式 。 

第 四 ， 重复 使 用 这 种 写法 会 产生 越 来 越 长 的 选择 各 ， 将 CSS 跟 特 定 的 HTML 结构 绑 定 在 一 
起 。 例 如 ， 如 果 有 个 #products-page .Sidebar .social-media div:first-child h3 
这 样 的 选择 硕 ， 样 式 集 就 会 和 指定 页 面 的 指定 位 置 又 紧 耦 合 。 

这 些 问题 是 开发 人 员 处 理 CSS 的 时 候 遭 受挫 折 的 根源 。 使 用 和 维护 的 样式 表 越 长 ， 情 况 越 
糟 。 新 样式 需要 敌 盖 旧 样 式 时 ， 选择 带 优 和 完 级 会 持续 提升 。 到 后 面 不 知 不 觉 地 就 会 发 现 ， 我 们 瑟 
了 一 个 选择 硕 ， 其 中 包含 两 个 ID 和 五 个 类 名 ， 只 是 为 了 匹配 一 个 复 选 框 。 

在 样式 表 中 ,元 素 被 各 种 彼此 不 相关 的 选择 器 匹配 ,这 样 很 难 找到 它 使 用 的 样式 。 理 解 整个 
样式 表 的 组 织 方式 变 得 越 来 越 困难 ,你 搞 不 明日 它 是 怎样 把 页 面 泻 染 成 这 样 的 。 捅 不 异 代 人 码 就 意 
味 着 bug 变 得 第 见 ， 可 能 很 小 的 改动 束 会 弄 乱 大 刻 的 样式 。 删 除 旧 代 码 也 不 安全 ， 因 为 你 不 了 解 
这 段 代码 是 干什么 的 ， 是否 还 在 用 。 样 式 表 越 长 ， 问 题 就 愈 发 严重 。 模 块 化 CSS 就 是 要 答 试 解 
决 这 些 问题 。 

当 模 块 需 要 有 不 同 的 外 观 或 者 表现 的 时 候 ， 就 创建 一 个 可 以 直接 应 用 到 指定 元 系 的 修饰 符 
尖 ， 比如 ， 与 .dropdown--dqark， 而 不 是 写成 .page-header .dropdown,o 通过 这 种 方式 ， 模 
块 本 号, 并 且 只 能 是 它 本 里, 可 以 决定 目 己 的 样式 表现 。 其 他 模块 不 能 进入 别 的 模块 内 部 去 修改 
它 。 这 样 一 来 ， 深 色 下 拉 列 表 并 没有 绑 定 到 深层 舱 登 的 HTML 缮 构 上 ， 也 就 可 以 在 页 面 上 需要 
的 地 方 随意 使 用 。 

和 干 万 不 要 使 用 基于 页 面 位 置 的 后 代 选 择 从 来 修改 模块 。 坚决 避 守 这 个 原则 , 就 可 以 有 效 防止 
样式 表 变 成 一 堆 难 以 维护 的 代码 。 


9.2.2 ”多 元 素 模块 
我 们 已 经 创建 了 消息 和 按钮 两 个 模块 ,简单 又 好 用 ,它们 都 由 单个 元 素 组 成 , 但 是 有 很 多 模 
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块 需要 多 个 元 系 。 我 们 不 可 能 只 靠 一 个 元 系 就 实现 下 拉 荣 单 或 者 模 态 框 。 
下 面 来 创建 一 个 更 复杂 的 模块 。 这 是 一 个 媒体 对 象 ( 如 图 9-3 所 示 )， 就 跟 第 4 章 (4.5.1 贡 ) 
我 们 做 的 那个 差不多 。 





Strength 


Strength training is an important part of injury prevention. 
Focus on your core 一 especially your abs and glutes. 





图 9-3 ”由 四 个 元 素 组 成 的 媒体 模块 


这 个 模块 由 四 个 元 素 组 成 : div 容 般 、 容 船 包 含 的 一 张 图 片 和 正文 、 正 文 里 的 标题 。 跟 其 他 
模块 一 样 ， 我 们 会 给 主 容 融 添加 media 类 名 来 匹配 模块 名 称 。 对 于 图 片 和 正文 ， 可 以 使 用 类 名 
media image 和 media body。 这 些 类 名 以 模块 名 称 开 头 ， 后 跟 双 下 划 线 ， 然 后 是 子 元 系 的 
名 称 。( 这 是 BEM 命名 规范 里 的 另 一 种 约定 。) 就 跟 双 连 字符 代表 的 修饰 符 一 样 ， 这 样 的 类 名 可 
以 清楚 地 告诉 我 们 这 个 元 系 扮 演 了 什么 角色 、 属 于 哪个 模块 。 

媒体 模块 的 样式 如 代码 清单 9-8 所 示 ， 将 其 添加 到 样式 表 中 。 


代码 清单 9-8 包含 子 元 素 的 媒体 模块 
.media { 
padding: 1.5em; | 主 容器 
background-color: #eee; 


border-radius: 0.5em; 


| 








hi < 一 一 一 清除 浮动 
Content: ™" 
display: block,; 
clear: both; 

} 


.media jimage { 
floats Lett 
margin-right: 1.5em; 


) 图 片 和 正文 子 元 素 


.media body { 
overflow: auto; 
margin-top: 0; 


} 
.media body > h4 { 

margin-top: 0; 正文 里 的 标题 
} 


你 会 发 现 并 不 需要 使 用 很 多 后 代 选 择 右 。 图 片 是 媒体 模块 的 一 个 子 元 素 ,， 所 以 可 以 使 用 选择 
姨 .media > .media image, 但 这 不 是 必要 的 。 因 为 media image 类 名 包含 了 模块 的 名 称 ， 
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所 以 已 经 确保 模块 名 称 是 独一无二 的 了 。 

正文 标题 确实 直接 使 用 了 后 代 选 择 右 。 其 实 也 可 以 用 media_ title 类 (或 者 media 
body__title， 这 样 可 以 完整 地 表示 出 在 整个 层级 中 的 位 置 ), 但 是 大 部 分 时 候 没 必要 。 在 本 例 
中 ，<hn4> 标 签 已 经 足够 语义 化 ， 能 够 表明 这 是 媒体 模块 的 标题 。 不 过 这 样 一 来 ， 标 题 就 不 能 使 
用 其 他 的 HTML 标签 ( <nh3> 或 者 <n5> ) 了 。 如 果 你 不 太 言 欢 这 么 严格 的 限制 ， 可 以 改 成 使 用 类 
名 来 匹配 元 系 。 

将 代码 清单 9-9 中 的 模块 标记 添加 到 页 面 中 。 


代码 清单 9-9 巡 体 模块 的 标记 














<div class="media"> 图 片子 元 素 
<img class="media image" src="runner.png"> 
<div class="media body"> = 本 

<h4>Strength</h4> 正文 子 元 素 
标题 子 元 素 


Strength training is an important part of 


injury prevention. Focus on your core&mdash; 


especially your abs and glutes. 











</D> 
</div> 
</div> 
这 是 个 多 功能 的 模块 ,可 以 工作 在 各 种 太 才 的 容 融 内 部 ， 随 着 容 天 宽 度 目 适应 调整 。 正 文 可 








以 包含 多 个 段落 ， 也 可 以 使 用 不 同 太 才 的 图 片 〈 可 以 考虑 为 图片 添加 max-wiatn 属性 ， 防 止 图 
户 挤 出 正文 区 域 )。 


1. 同时 使 用 变 体 和 子 元 素 
我 们 也 可 以 创建 模块 的 变 体 。 现在 可 以 很 轻松 地 把 图 片 从 左 浮动 改 成 右 浮动 ( 如 图 9-4 


所 示 )。 








Strength 


Strength training is an important part of injury prevention. 
Focus on your core 一 especially your abs and glutes. 





图 9-4 ”把 媒体 模块 的 图 片 改 到 右 侧 
变 体 media--right 可 以 实现 这 样 的 效果 。 我 们 把 变 体 的 类 名 添加 到 模块 的 主 div 上 ( <div 
class="media media--right">)， 然 后 通过 类 名 [匹配 图 片 并 设置 为 右 浮动 。 
将 修饰 符 类 名 添加 到 HTML 里 的 元 素 上 ， 然 后 把 代码 清单 9-10 添加 到 样式 表 里 查看 效果 。 











代码 清单 9-10 ”为 媒体 模块 定义 一 个 右 浮 动 变 体 
et 把 右 浮动 添加 到 图 片子 元 素 , 但 是 只 在 
) J media--right 修饰 符 中 生效 
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这 条 规则 窗 盖 了 媒体 图 片 之 前 的 float : left。 由 于 浮动 的 工作 原理 , 我 们 不 需要 改变 HTML 
中 元 素 的 排列 顺序 。 


2. 避免 在 模块 选择 器 中 使 用 通用 标签 名 

我 们 在 媒体 模块 中 使 用 了 选择 兹 .media__body > h4 来 匹配 标题 元 素 。 这 人 么 做 是 允许 的 ， 
因为 <zn4> 标 签 就 是 用 来 标识 一 个 次 要 标题 的 。 同 样 的 方式 也 可 以 用 在 市 列表 的 模块 上 。 相 比 为 
列表 里 的 每 个 项 目 都 添加 menu__item 类 名 , 使 用 .menu > 1i 匹配 末 单 项 简单 多 了 ， 尺 管 这 
种 写法 有 些 争 以 。 

我 们 应 该 避免 使 用 基于 通用 标签 类 型 的 匹配 ， 比 如 aiv 和 span。 类 似 于 .page-header > 
span 的 选择 需 太 宽泛 了 。 最 初 建立 模块 的 时 候 ， 可 能 只 是 用 span 标签 做 一 件 事 ， 但 谁 也 说 不 
准 以 后 会 不 会 出 于 其 他 目的 再 添加 第 二 个 span。 后 面 再 为 span 追加 类 名 就 比较 麻烦 了 ， 因 为 
我 们 需要 在 HTML 标记 中 找到 所 有 用 到 模块 的 地 方 ， 全 部 改 一 过 。 
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Robert C. Martin 在 《代码 整洁 之 道 》 一 书 中 说 过 ,“ 关 于 类 的 第 一 条 规则 是 类 应 该 短小 ， 第 
二 条 规则 是 还 要 更 短小 ”。 他 当时 指 的 是 面向 对 象 编程 里 面 的 类 ,但 是 这 些 规则 也 同样 适用 于 CSS 
里 的 模块 。 

每 个 模块 应 该 只 做 一 件 事情 。 消息 模块 的 职责 是 使 消息 提示 醒目 ; 媒体 模块 的 职责 是 在 一 段 
文本 中 配置 一 张 图 刻 。 我 们 可 以 简洁 明了 地 概括 出 它们 的 目标 。 有 的 模块 是 为 了 版 面 布局 ， 有 的 
是 为 了 编写 体例 。 当 模块 想 要 完成 不 只 一 件 事 的 时 候 ， 我 们 应 该 考虑 把 它 拆 分 成 更 小 的 模块 。 

我 们 做 一 个 下 拉 荣 单 来 演示 一 下 (如 图 9-5 所 示 ), 跟 第 7 半 (7.3.1 市 ) 里 创建 的 那个 有 点 像 。 


















































Main Menu < 
Home 
Coffees 
Brewers 
Specials 


About us 
图 9-5 下 拉 菜 单 


创建 模块 之 前 应 该 先 目 问 一 下 :“ 从 更 高 的 层面 上 看 , 这 个 模块 的 职责 是 什么 ?”” 对 于 本 例 ， 
你 的 回答 可 能 是 这 样 的 :“ 用 按钮 触发 下 拉 沫 单 并 展示 上 下 堆 县 排列 的 菜单 项 。 

束 这 个 场景 来 说 ， 这 还 算是 个 比较 恰当 的 描述 。 但 是 我 有 一 条 经 验 :“ 如 果 你 不 得 不 使 用 并 
(或 者 和 ) 这 个 词 来 表述 模块 的 职责 ， 那 你 可 能 正在 描述 多 项 职责 。” 因 此 , 模块 究 范 是 要 触发 采 
单 ， 还 是 展示 堆 番 末 蛙 项 呢 ? 

当 我 们 需要 使 用 并 (或 者 和 ) 来 描述 模块 职责 的 时 候 ， 思 考 一 下 是 不 是 在 描述 两 种 (甚至 更 
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多 的 ) 职责 。 有 可 能 不 是 ,我 的 经 验 也 不 是 金 科 玉 律 。 但 如 果 是 的 话 ， 我 们 就 需要 为 每 个 职责 分 
别 定义 模块 。 这 是 模块 封装 的 一 个 非常 重要 的 原则 ， 我 们 把 它 叫 作 单 一 职责 原则 ( Single 
Responsibility Principle ). 尽 可 能 把 多 种 功能 分 散 到 不 同 的 模块 中 ,这 样 每 个 模块 就 可 以 保持 精炼 、 
聚焦 ， 并 且 容 易 理 解 。 


9.3.1 拆 分 不同 模块 的 职责 


下 面 我 们 用 两 个 不 同 的 模块 来 创建 下 拉 沫 单 。 第 一 个 模块 可 以 叫 作 下 拉 〈dropdown )， 其 中 
包含 一 个 控制 容 迄 可 见 性 的 按钮 。 换 名 话说 ,这 个 模块 负责 展示 和 隐藏 容 侣 。 我 们 也 可 以 描述 按 
钮 的 外 观 和 代表 行为 的 小 三 角 。 阐 述 模 块 的 细 市 里 然 宁 要 用 到 并 (或 者 和 ), 但 是 这 些 细 市 部 是 
从 属于 前 要 职 贡 的 ， 因 此 这 么 做 没 问题 。 

第 二 个 模块 叫 作 沫 单 ， 是 放置 链接 的 列表 。 把 沫 单 模 块 的 一 个 实例 放 人 下 拉 模 块 的 容 胡 内 ， 
就 可 以 构成 完整 的 界面 了 。 

把 代码 清单 9-11 中 的 代码 加 入 到 页 面 中 。 这 段 代 码 主 体 是 一 个 下 拉 模 块 ， 下 拉 模 块 内 部 包 
含 了 菜单 模块 。 代 码 中 还 有 一 小 段 JavaScript， 当 触发 器 被 点 击 时 用 来 实现 开关 的 功能 。 


代码 清单 9-11 用 两 个 模块 构造 一 个 下 拉 沫 单 


<div class="dropdown"> 









































<button class="dropdown toggle">Main Menu</button> 下 拉 的 触发 
<div class="dropdown drawer"> 按钮 
<ul class="menu"> 
<1i><a href="/">Home</a></11i> 
<1i><a href="/coffees">Coffees</a></11i> 用 作 菜 单 容 器 的 
<1i><a href="/brewers">Brewers</a></11i> 抽 居 子 元 素 
<l1i><a href="/specials">Specials</a></11> 
ay href="/about">About us</a></11> 放 在 抽 居 内 部 的 
</div> 莱 单 模块 
</div> 
<script type="text/jJavascript"> 
(function () { 
Var toggle = 
document .guerySelector('.dropdown toggle'); 
toggle.addEventListener('click', function (event) { 
event .preventDefault(); ce 
Var dropdown = event.target .parentNode; 凡 击 触发 按钮 的 时 候 
dropdown.classList.toggle('is-open'); 切换 is-open 类 
} 
); 
js( 
</sSscript> 








这 里 使 用 了 双 下 划 线 标记 , 表示 触发 融和 抽 屠 是 下 拉 模 块 的 子 元素 。 点 击 触发 大 可 以 显示 或 
者 隐藏 抽 屠 元 素 。JavaScript 代码 为 下 拉 模 块 的 主 元 素 添 加 或 者 移 除 is-open 类 ， 以 此 来 实现 这 
个 功能 。 
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下 拉 模 块 的 样式 如 代码 清单 9-12 所 示 ， 将 其 添加 到 样式 表 中 。 这 些 样式 跟 第 7 革 里 演示 的 
差不多 ， 只 是 为 了 符合 双 下 划 线 标记 法 修改 了 一 下 类 和 名。 这样 就 实现 了 下 拉 的 功能 ,不 过 里 面 的 
荣 单 目前 还 没有 样式 。 


代码 清单 9-12 定义 下 拉 模 块 


.dropdown { 

display: inline-block; 

position: relative; 为 绝对 定位 的 抽 居 元 素 
} 建立 一 个 包含 块 


.dropdown toggle { 
padding: 0.5em 2em 0.5em 1.5em; 
border: lpx solid #ccc; 
font-size: lrem; 
background-color: #eee; 


} 


.dropdown toggle: :after { 
CONEenGe ™” 
position: absolute; 
right: lem; 


top: lem; 使 用 边框 绘制 三 角形 
border: 0.3em solid; (参见 第 7 章 ) 


border-color: black transparent transparent,; 


} 


.dropdown drawer { 
display: none; 
position: absolute; 
eft Os 
top: 2.1em; 
min-width: 100%; 
background-color: #eee; 
} 初始 时 隐藏 抽 居 元 素 ， 触 发 
is-open 类 的 时 候 再 显示 
.dropdown.is-open .dropdown toggle::after { 
top: 0.7em; 
border-color: transparent transparent black; 
} 
.dropdown.is-open .dropdown drawer { 
display: block; 
} 


下 拉 框 打开 的 时 候 
翻转 三 角形 











在 代码 清单 9-12 里 ， 主 元 率 使 用 了 相对 定位 ， 这 样 就 创建 了 一 个 包含 块 ， 抽 居 元 素 在 包含 
块 内 使 用 绝对 定位 。 代 码 也 为 触发 按钮 提供 了 一 些 样 式 ， 包括 : :after 伪 元 系 里 的 三 角形 。 在 
添加 了 is-open 类 之 后 ， 它 会 显示 抽 居 元 系 并 翻转 三 角形 。 

一 共 大 约 35 行 代码 ， 涉 及 了 不 少 东 西 ， 但 不 至 于 在 使 用 模块 的 时 候 训 无 头绪 。 接 下 来 ， 当 
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我 们 需要 回 过 头 修改 某 个 醒 块 时 ， 就 会 发 现 模块 越 小 越 好 ， 这 有 助 于 迅速 理解 。 


1. 在 模块 里 使 用 定位 

这 是 我 们 第 一 个 使 用 定位 的 模块 ， 其 中 创建 了 模块 自己 的 包含 块 ( 主 元 素 的 position: 
relative )。 绝 对 定位 的 元 素 ( 抽 屈 元 素 和 : :after 伪 元 素 ) 就 是 基于 同一 个 模块 内 的 位 置 来 
定位 的 。 

应 该 尽量 让 需要 定位 的 元 到 关联 到 同一 个 模块 内 的 其 他 元 素 。 只 有 这 样 , 我 们 把 模块 放 在 另 
一 个 有 定位 的 容器 里 的 时 候 ， 才 不 会 弄 乱 样式 。 


2. 状态 类 

is-open 类 在 下 拉 模 块 中 有 特定 的 用 途 。 我 们 在 模块 里 使 用 JavaScript 动态 地 添加 或 移 除 它 。 
它 也 是 状态 类 ( state class ) 的 一 个 示例 ， 因 为 它 代 表 着 模块 在 当前 状态 下 的 表现 。 

按照 惯例 ， 状 态 类 一 般 以 is- 或 者 has- 开 头 。 这 样 状态 类 的 目的 就 会 比较 明显 ， 它 们 表示 模 
块 当前 状态 下 的 一 些 特征 或 者 即将 发 生 的 变化 。 再 举 一 些 状态 类 的 示例 ， 比 如 is-expangded.、 
is-loading 或 者 has-error 等 。 这 些 状 态 类 具体 会 表现 成 什么 样子 取决 于 使 用 它们 的 模块 。 


重点 ”状态 类 的 代码 要 和 模块 的 其 他 代码 放 在 一 起 。 使 用 JavaScript 动态 更 改 模块 表现 
的 时 候 ， 要 使 用 状态 类 去 触发 改变 。 






































预 处 理 器 和 模块 化 CSS 

所 有 的 预 处 理 器 ( 比如 Sass 或 者 LESS ) 都 提供 了 把 分 散 的 CSS 文件 合并 成 一 个 文件 的 功 
能 。 我 们 可 以 用 多 个 文件 和 多 个 目录 来 组 织 样式 , 最 后 提供 一 个 文件 给 浏览 器 。 这 样 可 以 减少 
浏览 器 发 起 的 网 络 请 求 数 , 开发 者 也 可 以 把 代码 文件 拆 分 成 易于 维护 的 大 小 。 我 认为 这 是 预 处 
理 器 提供 的 最 有 价值 的 特性 之 一 。 

如 果 你 正好 在 使 用 某 种 预 处 理 器 ， 那 我 强烈 建议 你 把 CSS 里 的 每 个 模块 都 放 在 各 自 对 应 
命名 的 文件 里 ,并 按 实际 需要 将 这 些 文件 组 织 到 不 同 目 录 中 。 然后 创建 一 个 主 样式 表 , 引入 所 
有 的 模块 。 这样 一 米 ， 你 想 修 改 茶 个 模块 时 就 不 必 到 一 个 宛 长 的 样式 表 里 面 搜索 了 ， 因 为 很 清 
楚 去 哪儿 找 它 。 

你 可 以 创建 一 个 main.scss 文件 ， 里 面 只 包含 @import 语句 ， 如 下 所 示 。 

Rn 
import 'message'; 


lOOFE "IoCEOm'"S 
import 'media'; 


DD DOPOD DH 





import 'dropdown'; 

预 处 理 器 会 从 base.scss 中 引入 基础 样式 ， 从 每 个 模块 文件 引入 相应 的 模块 样式 ， 然 后 输 
出 一 个 包含 所 有 样式 的 样式 表 文 件 。 这 样 每 个 模块 都 单独 拥有 一 个 便于 维护 的 文件 。 

查看 附录 B 可 以 获取 更 多 关于 预 处 理 器 的 信息 ， 或 者 参考 预 处 理 器 的 文档 学 习 如 何 使 用 
TO 7 
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3. 菜单 模块 

下 拉 模 块 已 经 搞定 了 ,下面 开始 实现 菜单 模块 。 我 们 不 需要 关心 下 拉动 作 的 开 和 关 ，,， 这 已 经 
在 下 拉 模 块 里 实现 了 。 某 单 模 块 只 需要 实现 链接 列表 的 观感 。 

样式 如 代码 清单 9-13 所 示 ， 将 其 添加 到 样式 表 中 。 


代码 清单 9-13 采 单 模块 的 样式 








.menu { 
margin: 0; 覆盖 浏览 器 默认 样式 ， 
padding- lett: 0; 移 除 列表 的 项 目 符号 
list-style-type: none; 


border: lpx soliqd #999;，; 
} 


0 > ee a 每 个 链接 之 间 添 加 
border-top: lpx soliqd #999; 一 条 边框 

} 

.menu > 11 > a { 增 大 链接 的 


display: block; 
padding: 0.5em 1.5em; 
background-color: #eee; 
COlor: #369; 
text-decoration: none; 


} 


给 鼠标 悬 停 添加 
| 高 亮 效 果 


background-color: #fff; 
} 


这 里 使 用 了 和 第 7 章 的 下 拉 沫 单 相同 的 声明 。 每 个 <1i> 都 是 模块 的 子 元 素 ， 所 以 我 认为 没 
必要 为 每 个 元 系 添加 双 下 划 线 类 ， 直 接 使 用 后 代 选 择 希 .menu > 1i 已 经 足够 明确 了 。 

某 单 模块 是 完全 独立 的 ， 并 不 依赖 于 下 拉 模 块 。 这 使 得 代码 更 简单 ， 因 为 我 们 不 需要 理解 在 
这 个 模块 之 前 先 搞 异 为 一 个 ， 也 有 助 于 更 加 灵活 地 复 用 模块 。 

我 们 可 以 根据 不 同 需 要 创建 其 他 样式 的 菜单 ( 变 体 或 者 完全 不 同 的 模块 虱 可 以 )， 用 在 下 拉 
模块 的 内 部 。 也 可 以 把 采 蛙 模块 用 在 下 拉 模 块 以 外 的 任 蕊 地 方 。 我 们 无 法 预知 后 面 的 页 面 需 要 什 
么 ， 但 有 了 可 复 用 的 模块 ， 可 以 一 定 程 度 上 确保 提供 前 后 一 致 的 观感 。 


9.3.2 ”模块 命名 


为 模块 命名 是 个 很 伤 脑筋 的 事情 。 开 发 模块 的 时 候 我 们 可 以 用 个 临时 的 名 称 , 但 是 最 终 完成 
之 前 ， 一 定 要 注意 命名 。 这 可 能 算是 模块 化 CSS 开发 里 最 难 的 部 分 了 。 
回想 一 下 前 面 间 他 里 的 媒体 模块 ， 如 图 9-6 所 示 ， 我 们 用 它 来 展示 一 张 跑步 者 的 图 片 和 跑步 


小 提示 。 


可 点 击 区 域 
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Strength 
Strength training is an important part of injury prevention. 
Focus on your core 一 especially your abs and glutes. 


图 9-6 包含 图 片 和 跑步 小 提示 的 媒体 模块 


假设 我 们 还 没有 为 该 模块 命名 ， 现 在 有 个 页 面 需 要 用 到 它 ， 我 们 可 能 会 叫 它 跑步 提示 模块 。 
这 个 名 称 很 贴切 , 看 上 去 也 比较 合适 , 但 是 我 们 可 能 会 用 这 个 模块 里 的 样式 去 做 其 他 事情 。 如 末 
使 用 同样 的 UI 元 系 做 别 的 事情 ， 该 怎么 办 呢 ? 比如 延续 跑步 主题 网 站 的 主题 ， 我 们 可 能 会 使 用 
一 连 串 的 模块 列 出 即将 举办 的 赛事 信息 ， 这 时 候 还 以 跑步 提示 来 命名 模块 就 不 合适 了 。 

模块 的 命名 应 该 有 意义 ,无论 使 用 场景 是 什么 。 同 时 也 要 避免 使 用 人 简单 地 描述 视觉 效果 的 名 
称 。 把 这 个 模块 叫 作 “市 图 片 的 灰 盒 子 ” 看 上 去 比较 通用 一 些 ， 但 是 如 采 之 后 要 改 成 浅 蓝 色 硼 景 
呢 ? 或 者 重新 设计 网 站 呢 ? 这 样 的 名 称 就 不 能 用 了 ， 你 还 得 重新 命名 ， 再 奉 换 掉 HIML 里 所 有 
用 到 它 的 地 方 。 

我 们 应 该 换 一 种 思路 ， 思 考 模块 代表 什么 含义 。 这 一 般 并 不 容易 。“ 媒 体 模 块 ”这 个 名 称 就 
很 恰当 , 它 代表 了 一 种 图 文 混 排 的 版 式 。 它 给 人 以 强烈 的 印象 ,并 没有 将 模块 局 限于 任何 特定 用 
法 或 者 视觉 实现 。 

模块 要 适用 于 各 种 不 同 场景 ， 而 其 名 称 应 该 简单 易 记 。 当 网 站 有 很 多 页 面 的 时 候 ， 我 们 可 能 
会 多 次 用 到 某 个 模块 。 到 时 候 你 和 团队 里 其 他 成 员 沟 通 ， 可 能 会 进行 这 种 对 话 :“ 这 里 用 个 “ 媒 
体 ” 这 些 “ 板 块 ” 太 挤 了 ”。 

目前 ,我 们 已 经 实现 了 消息 模块 、 媒 体 模 块 、 下 拉 模 块 和 菜单 模块 。 一些 比较 好 的 模块 名 称 
包括 面板 (panel )、 和 警告 (alert )、 可 折 著 的 部 分 (collapsible-section )、 表 单 控制 项 ( form-control ) 
等 。 如 果 你 从 一 开始 就 对 网 站 的 整体 设计 有 全 面 的 了 解 , 会 有 助 于 命名 。 例如 ,你 可 能 觉得 有 两 
个 UI 元 素 都 可 以 叫 作 板块 tile )， 然 而 它们 毫 不 相关 ， 这 时 候 就 应 该 更 明确 地 命名 它们 《比如 
媒体 板块 和 标题 板块 )。 

有 些 人 强制 使 用 两 个 词 来 命名 每 个 模块 , 这 样 就 可 以 避免 模块 指 代 不 明确 , 因为 你 也 不 知道 
什么 时 候 会 需要 男 一 个 新 的 板块 模块 。 如 果 现 有 的 板块 模块 命名 比较 明确 , 新 的 板块 模块 出 现 的 
时 候 ， 再 取 名 就 会 比较 容易 ， 不 至 于 跟前 一 个 混 消 。 

为 模块 的 变 体 类 命名 的 时 候 , 应 该 遵守 同样 的 原则 。 例 如 ， 如 有 果 已 经 有 按钮 模块 了 ， 束 不 应 
该 使 用 button--red 和 button--blue 命名 红色 和 蓝 色 变 体 子 类 。 网 站 设计 在 将 来 有 可 能 会 
改变 ， 你 不 知道 这 些 按钮 的 颜色 会 不 会 也 跟着 变化 。 应 该 使 用 一 些 更 有 意义 的 名 称 ， 比 如 
button==danyer Tl Dutton= -SiCeRess.: 

使 用 大 或 小 这 样 具有 相对 意义 的 词语 来 命名 修饰 符 不 是 最 佳 方式 , 但 也 可 以 接受 。 没 人 说 过 
网 站 重 构 的 时 候 不 能 更 改 DUEEON-==]arge 的 尺寸 ， 只 要 它 还 是 比 标 准 按钮 大 一 些 就 可 以 。 一 定 
要 牢记 ， 不 要 使 用 像 putton--20px 这 样 特别 精确 的 修饰 符 。 
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9.4 工具 类 


有 时 候 , 我 们 需要 用 一 个 类 来 对 元 素 做 一 件 人 简单 明确 的 事 , 比如 让 文字 居中 、 让 元 素 左 浮动 ， 
或 者 清除 浮动 。 这 样 的 类 被 称 为 工具 类 (utility class )。 

从 某 种 意义 上 讲 , 工具 类 有 点 像 小 号 的 模块 。 工 具 类 应 该 专注 于 某 种 功能 , 一 般 只 声明 一 次 。 
我 通常 把 这 些 工 具 类 放 在 样式 表 的 底部 ， 模 块 代码 的 下 面 。 

代码 清单 9-14 展示 了 四 个 工具 类 ， 它 们 分 别 实 现 了 特定 的 功能 : 文字 居中 、 左 浮动 、 清 除 
浮动 ( 包 早 浮动 )、 隐 藏 元 素 。 


代码 清单 9-14 工具 类 示例 














.text -center 、| oi Om 
text-align: a !important,; 让 容 屁 内 的 
字 居 中 
) 文字 
. 在 下 七 一 上 全 ~ 一 一 ~ coo 
ee 为 元 素 设置 
float: left; SS 
左 浮动 
.Clearfix: :before, 
I < 一 一 一 清除 浮动 
Content: ™ "™; 
display: table; 
} 
Clearfix after, 并 
clear: both; 
} 
隐藏 页 面 上 某 
， 大 三 
.hidden { 上 元 素 


display: none !important; 


} 


这 里 用 到 了 两 次 !important。 工具 类 是 唯一 应 该 使 用 important 注释 的 地 方 。 事实 上 , 工具 
类 应 该 优先 使 用 它 。 这 样 的 话 ， 不 管 在 哪里 用 到 工具 类 ， 都 可 以 生效 。 我 敢 肯 是， 任何 时 候 为 元 
率 添 加 text-center 类 , 都 是 想 让 文本 居中 ，, 不 想 计 其 他 样式 覆盖 它 。 用 了 important 注释 就 可 
以 确保 这 一 点 。 

可 以 把 这 些 类 添加 到 页 面 元 素 里 看 看 实际 效果 。 <div class="text-center"> 可 以 使 其 
中 的 文本 居中 。 将 float-right 添加 到 <img> 标 签 可 以 使 其 浮动 ， 把 clearfix 添加 到 <img> 
的 容 融 元 素 上 可 以 使 其 包 囊 浮动 。 

工具 类 的 作用 立竿见影 。 在 页 面 上 做 点 小 事 儿 的 时 候 不 需要 创建 一 个 完整 的 模块 , 这 种 情况 下 
可 以 用 一 个 工具 类 来 实现 。 但 是 不 要 滥用 工具 类 。 对 于 大 部 分 网 站 ， 最 多 十 几 个 工具 类 承 够 用 了 。 





























9.5 CSS 方法 论 
模块 化 CSS 的 概念 几 年 前 就 出 现 了 。 有 些 开 发 者 在 大 型 项 目 中 经 历 了 CSS 体积 过 大 导致 的 
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问题 ， 开 始 制 定 一 些 规则 来 确保 代码 复 用 和 减少 bug。 近 几 年 ， 在 此 基础 上 发 展 建 立 了 一 些 新 的 
方法 论 。 这 些 方法 论 并 不 是 以 任何 库 或 者 技术 的 形式 出 现 的 ， 但 确实 为 开发 者 组 织 CSS 代码 提 
供 了 一 些 引 导 。 

本 章 里 很 多 的 点 子 是 之 前 做 出 尝试 的 那些 开发 者 的 智慧 结晶 。 你 如 果 你 遵循 本 章 给 出 的 建 
议 ， 那 么 在 遵循 大 部 分 方法 论 方面 你 还 有 很 长 的 路 要 走 。 

这 些 实践 对 于 CSS 领域 具有 里 程 碑 意义 。 我 们 值得 花 时 间 研 究 一 下 其 中 比较 重大 的 几 个。 
有 的 比较 简单 ， 只 提供 了 一 些 编码 指导 ; 有 的 比较 严格 , 硬性 规定 了 样式 代码 的 组 织 形 式 。 每 种 
方法 论 都 有 自己 的 术语 和 命名 规范 ， 但 最 终 都 是 为 了 实现 CSS 模块 化 。 

口 OO0CSS 一 一 面向 对 象 的 CSS， 由 Nicole Sullivan 创建 。 

口 SMACSS 一 一 可 扩展 的 、 模 块 化 CSS 架构 ， 由 Jonathan Snook 创建 。 

口 BEM 一 块 ( Block )、 元 系 ( Element ) 和 修饰 符 (Modifier )， 由 Yandex 公司 提出 。 

D ITCSS 倒 三 角形 CSS， 由 Harry Roberts 创建 。 

这 个 列表 大 体 上 是 按时 间 顺 序 排列 的 , 同时 针对 代码 组 织 的 约束 也 在 增强 。OOCSS 仅 是 基于 
一 些 引 导 原 则 ，ITCSS 对 类 的 命名 和 样式 归 类 有 明确 的 规则 ，SMACSS 和 BEM 则 介 于 两 者 之 间 。 

本 章 中 已 经 介绍 了 样式 表 的 三 个 主要 组 成 部 分 : 基础 样式 、 模 块 样式 和 工具 类 。SMACSS 
增加 了 布局 样式 的 部 分 ， 用 来 处 理 页 面 主要 区 域 的 布局 ( 侧 边 栏 、 页 脚 、 网 格 系统 等 )。ITCSS 
则 进一步 将 类 别 分 为 七 个 层 。 

如 果 你 对 这 些 方法 论 感 兴趣 ,我 建议 你 深入 研究 一 下 。 它们 有 不 同 的 术语 , 但 在 很 多 方面 又 
是 互补 的 。 选 择 其 中 你 最 言 欢 的 一 种 去 实践 ， 或 者 总 结 出 自己 想 要 的 模块 化 CSS 写法 。 如 果 你 
在 团队 里 工作 , 就 尝试 寻求 一 种 大 家 都 认可 的 方式 。 如 果 你 不 喜欢 之 前 我 介绍 的 BEM 命名 语法 ， 
可 以 用 别 的 ,或 者 创建 满足 你 需求 的 全 新 写法 。 
























































JavaScript 替代 方案 

在 大 型 团队 里 书写 模块 化 样式 ， 需 要 一 些 苛 刻 的 约束 条 件 来 确保 每 个 人 遵守 相同 的 约定 。 
同时 也 需要 采取 一 些 措施 来 防止 大 家 新 建 的 模块 名 称 出 现 冲 突 。 为 了 解决 这 些 问题 ,一 些 Web 
开发 社区 开始 尝试 模块 化 CSS 的 蔡 代 方案 。 一 番 探 索 后 ， 他 们 转向 了 JavaScript， 最 终 发 明了 
一 种 解决 方案 ， 被 称 为 内 联 样式 (inline styles ) 或 者 CSS in JS 。 

这 种 方案 不 再 依赖 类 命名 的 口头 约定 ， 而 是 使 用 JavaScript 来 控制 ， 要 么 生成 独一无二 的 
类 名 ， 要 么 使 用 HTML 的 style 属性 引入 所 有 的 样式 。 已 经 出 现 了 不 少 具备 这 种 功能 的 
JavaScript 库 ， 其 中 比较 流行 的 有 Aphrodite 、Styled Components 和 一 个 叫 作 CSS Modules ( 容 
易 引 起 误解 ) 的 库 。 绝 大 部 分 库 绑 定 了 一 个 JavaScript 框架 或 者 工具 集 ， 比 如 WebPack。 

这 种 解决 方案 目前 仍 处 于 试验 阶段 ( 甚至 有 一 些 争 议 性 )， 但 是 值得 去 了 解 一 下 ， 特 别 是 
如 果 你 正在 做 单 页 应 用 程序 ( SPA ) 开发 。 它 只 能 在 完全 由 JavaScript 框架 泻 染 的 项 目 里 使 用 ， 
比如 ReactJS。 采 用 这 种 方案 需要 做 一 些 权 衡 ， 并 且 会 限制 使 用 特定 的 工具 集 。 虽 然 这 并 非 完 
美的 解决 方案 ,但 已 经 在 一 些 场 景 验证 过 是 成 功 的 。 


总 结 
口 把 CSS 拆 解 成 可 复 用 的 模块 。 

口 不 要 书写 可 能 影响 其 他 模块 或 者 改变 其 他 模块 外 观 的 样式 。 

口 使 用 变 体 类 ， 提 供 同 一 模块 的 不 同 版 本 。 

口 把 较 大 的 结构 拆 解 成 较 小 的 模块 ， 然 后 把 多 个 模块 组 合 在 一 起 构建 页 面 。 

口 在 样式 表 中 ， 把 所 有 用 于 同一 个 模块 的 样式 放 在 一 起 。 

口 使 用 一 种 命名 约定 ， 比 如 双 连 字符 和 双 下 划 线 ， 以 便 一 眼 就 可 以 看 清楚 模块 的 结构 。 
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本 章 概要 

口 创建 模式 库 ， 收 录 模 块 

口 开发 过 程 中 引入 模式 库 

口 使 用 CSS 优先 的 方案 书写 样式 
口 安全 地 编辑 和 删除 CSS 

口 使 用 Bootstrap 之 类 的 CSS 框架 





在 我 们 开始 用 模块 化 的 方式 书写 CSS 后 ， 处理 Web 页 面 和 Web 应 用 程序 的 方式 也 会 随 之 改 
变 。 起初 ,我 们 编写 页 面 时 可 能 感觉 不 出 什么 不 同 。 但 是 一 段 时 间 之 后 ,在 我 们 组 建 某 个 页 面 的 
时 候 就 会 发 现 ， 这 个 页 面 所 需 的 很 多 模块 我 们 已 经 写 完了 。 例如 ， 如 果 需 要 一 个 媒体 对 象 , 或 者 
下 拉 或 导航 菜单 ,我 们 已 经 创建 过 它们 了 ， 有 了 一 些 现成 的 样式 。 接 下 来 只 需要 按照 恰当 的 方式 
组 装 元 素 并 添加 正确 的 类 名 即 可 。 

因为 模块 是 可 复 用 的 , 所 以 我 们 在 编写 页 面 里 相关 部 分 的 时 候 , 就 不 需要 问 样 式 表 里 添加 新 
样式 了 。 不 同 于 以 往 的 先 写 HTML 再 与 样式 ， 只 需要 使 用 这 些 已 经 存在 的 模块 ， 组 逆 在 一 起 ， 
就 可 以 生成 一 个 新 页 面 。 项目 进行 得 越 深 入 ,我们 需要 写 的 新 CSS 就 越 少 。 这 时 候 我 们 需要 关 
注 的 就 不 是 新 CSS， 而 是 样式 表 里 所 有 可 用 的 模块 清单 了 。 

把 模块 清单 整合 成 一 组 文档 ， 在 大 型 项 目 中 已 经 成 为 通用 做 法 。 这 组 文档 被 称 为 模式 库 
( pattern library ) 或 者 样式 指南 ( style guide )。 模式 库 不 是 网 站 或 者 应 用 程序 的 一 部 分 ， 它 是 单独 
的 一 组 HTML 页 面 ， 用 来 展示 每 个 CSS 模块 。 模 式 库 是 你 和 你 的 团队 在 建站 的 时 候 使 用 的 一 个 
开发 工具 。 

本 章 将 展示 如 何 创 建 一 个 模式 库 。 有 非常 多 的 工具 可 以 辅助 我 们 创建 模式 库 ( 当然 ,如果 你 
想 挑 战 一 下 ， 也 可 以 完全 不 使 用 工具 ) 下 面 我 会 介绍 一 款 这 样 的 工具 ， 名 为 KKSS， 但 关注 点 不 
会 只 局 限于 这 款 工具 ， 也 会 讲 到 一 些 工 具 之 外 的 通用 概念 。 

在 模式 库 启动 后 , 我 会 重点 介绍 模式 库 带 来 的 主要 好 处 和 它 是 如 何 提升 开发 体验 的 , 特别 是 
对 大 型 项 目 来 说 。 本 章 是 第 9 章 的 延伸 ， 如 果 你 跳 过 了 前 面 ， 建 议 你 退回 去 先 阅读 一 下 第 9 章 。 
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模式 库 与 样式 指南 

有 些 模 式 库 经 常 被 称 为 样式 指南 (或 者 “在 线 样式 指南 ”)。 实 际 上 样式 指南 可 能 更 通用 ， 
DT 

样式 指南 ( style guide ) 这 个 名 称 ， 不 但 意味 着 关于 如 何 使 用 模块 的 技术 层面 上 的 说 明 ， 
而 且 包 含 了 何 时 何故 是 否 应 该 使 用 它们 这 样 偏 主观 的 引导 ,比较 典型 的 引导 是 要 求 开 发 者 遵守 
一 些 产 品 品牌 相关 的 规定 。 

如 果 这 种 品牌 相关 的 规定 对 于 你 的 项 目 有 意义 , 那么 可 以 随意 将 其 添加 到 模式 库 , 不 过 这 
些 就 属于 市 场 营 销 领 域 而 非 开 发 领域 。 由 于 本 章 主 要 关注 技术 文档 相关 的 方面 , 因此 我 就 用 模 
式 库 (pattern library ) 这 个 名 称 代 替 了 。 


10.1 KSS 简介 


在 整 本 书 中 ,我 一 下 强调 不 要 过 多 地 讨论 工具 。 对 CSS 里 最 重要 的 概念 的 理解 和 应 用 无 关 
乎 所 使 用 的 工具 集 ， 而 且 我 党 得 应 该 重点 关注 这 些 概念 ， 而 不 是 关注 使 用 哪个 预 处 理 融 或 者 构建 
Ts 

虽然 创建 模式 库 的 时 候 不 使 用 任何 工具 也 可 以 , 但 有 了 工具 的 帮助 会 容易 很 多 。 有 不 少 相 关 
功能 的 工具 库 可 以 使 用 ， 在 搜索 引擎 里 搜索 “style guide generator”， 就 可 以 找到 大 量 结 果 。 无 法 
确定 这 些 工 具 里 最 好 的 是 哪个 ,但 是 KSS 确实 是 其 中 的 佼佼 者 。KSS 是 Knyle Style Sheets 的 向 
写 ( “Knyle” 来源 于 作者 的 名 字 Kyle Neath )。 

接 下 来 演示 一 下 如 何 设置 和 运行 KSS。, 配 置 完 成 后 ,KSS 扫描 样式 表 , 找 到 包含 styleguide 
的 注释 块 。 开 发 者 可 以 使 用 注释 块 来 描述 每 个 模块 的 功能 和 用 法 ，KSS 正 是 借 此 创建 HTML 文 
档 的 。 注 释 块 里 也 可 以 包含 HTML 片段 ， 用 来 说 明 创建 这 个 模块 需要 的 标记 。 通 过 这 种 方式 ， 
KSS 在 文档 中 生成 了 类 似 于 稚 图 网 10-1 所 示 的 在 线 演示 。 
































My patte Section 2 

rn 
library Dropdown 

A dropdown menu. Clicking the toggle button opens and closes the drawer. 

0 Overview 
1 Buttons 
2 Dropdown 于 
3 Media object 
4 Menu Open menu 
5 Message 
6 Utilities <div class="dropdown"> 


<button class="dropdown__toggle">0pen menu</button> 
<div class="dropdown__drawer"> 
Drawer contents 
</div> 
</div> 


Source: styles,. css, line 140 


图 10-1 ”生成 下 拉 模 块 的 KSS 文档 
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在 该 截图 中 , 左 侧 是 一 个 沫 单 ， 列 出 了 模式 库 中 的 各 个 组 成 部 分 。 右 侧 是 下 拉 模 块 的 说 明文 
档 〈 就 像 第 9 草 我 们 实现 的 那个 下 拉 模 块 一 样 )。 文 梢 中 既 包 含 了 泻 染 好 的 下 拉 沫 单 ， 也 展示 了 
需要 用 到 的 HTML 标记 。 通 过 查看 文档 ， 任 何 熟 悉 HTML 的 开发 者 痢 可 以 轻松 地 复制 这 些 标 记 
到 页 面 里 ， 然 后 在 样式 表 的 作用 下 生成 相应 的 效 末 。 

















10.1.1 了 区 置 KSS 


KSS 最 初 是 一 个 Ruby 应 用 程序 。 我 们 现在 在 基于 前 端 开发 的 领域 探讨 ， 你 对 JavaScript 可 
能 更 熟悉 一 点 ， 因 此 接 下 来 我 会 演示 如 何 安 装 KSS 的 Node.js 工具 。 

如 果 你 还 没有 安装 Node.js， 可 以 访问 Node.js 网 站 免费 获取 ,然后 按照 指导 下 载 安装 。Node 
目 带 了 一 个 包 管理 需 〈 叫 作 npm )， 我 们 可 以 通过 它 来 安装 KSS。 我 会 把 安装 过 程 中 用 到 的 命令 
给 你 ,但 如 果 你 想 要 了 解 更 多 关于 npm 的 信息 ， 或 者 遇 到 问题 寻求 帮助 ， 可 以 参考 npm 文档 。 

1. 初始 化 项 目 

Node 和 npm 安装 好 以 后 ， 可 以 在 文件 系统 的 任意 地 方 为 项 目 创建 目录 。 在 终端 界面 访问 目 
录 ， 运 行 npm init -y 来 初始 化 一 个 新 项 目 。-y 选项 会 为 项 目 名 称 、 许 可 和 其 他 配置 自动 设 
置 默 认 值 (如果 没有 使 用 -y 选项 ，npm 就 会 提醒 你 输入 这 些 值 )。 

初始 化 项 目 之 后 ，npm 会 创建 一 个 packagejson 文件 ， 以 JSON 格式 展示 项 目的 npm 元 数据 
(如 代码 清单 10-1 所 示 )。 


代码 清单 10-1 生成 package.json 文件 


简明 扼要 的 npm 
name": "pattern-library", 项 目 名 称 


{ 
VESLOn es, Tha0a0 
版 本 号 "dascriotLon ss. TC 





























main": "index.js" 天 于 项 昌 的 大 段 描 
| 述 可 以 放 在 这 里 
SCTTEOESY,S 
"test": "echo \"Error: no test specified\" && exit 1" 
"keywords": [], 
"author": "Keith J. Grant", 
"license": "ISC" 





接 下 来 , 我 们 可 以 安 污 KSS 作为 一 个 依赖 4 dependency )。 在 终端 里 输入 npm install --save- 
dev kss， 这 做 了 两 件 事情 : 一 是 在 项 目 中 创建 了 一 个 node_ modules 目录 ， 其 中 安装 了 KSS 和 
它 的 依赖 ; 二 是 把 “kss” 写 和 人 package.json 文件 中 描述 开发 依赖 的 列表 ( devDependencies )。 


2. 添加 KSS 配置 

KSS 需要 一 个 配置 文件 。 这 个 文件 为 KSS 提供 访问 目录 和 文件 的 路 径 ， 然 后 KSS 使 用 目录 
和 文件 来 创建 模式 库 。 在 项 目 目录 下 新 建 一 个 名 为 kss-config.json 的 文件 ， 复制 代 码 清 单 10-2 到 
文件 中 。 











10.1 KSS 简介 223 


代码 清单 10-2 ”KSS 配置 文件 ( kss-config.json ) 
{ 
bw "My pattern library 二 加 Css 源 文 件 的 目录 路 径 


"Ssource": | 


, ' (KSS 将 要 扫描 的 ) 
. /CSS 
] a 
ER ， 生成 的 模式 库 文 件 
, ee 将 写 入 的 路 径 


"../css/styles.css" 


] 样式 表 文件 路 径 (相对 于 
"js : | destination 目录 ) 


"../JSs/docs.Js" | 一 些 JavaScript 文件 路 径 


| (相对 于 destination 目录 ) 


; 


Source 路 径 告 诉 KSS 去 哪里 寻找 CSS 源 文件 ,然后 KSS 才 可 以 扫描 源 文 件 里 面 的 文档 注释 。 
KSS 根据 这 些 注释 在 目标 目录 里 生成 模式 库 的 页 面 。 

css 和 js 字段 里 列 出 的 每 个 文件 都 会 被 添加 到 模式 库 页 面 。 我 们 已 经 为 它们 各 目 配 置 了 一 
个 css 和 js 目录， 现在 就 可 以 去 创建 这 两 个 目录 和 里 面 的 源 文件 ( css/styles.css 和 js/docs.js )。 文 
件 目 前 是 空 的 ， 很 快 就 会 问 里 面 添加 内 容 。 


说 明 在 我 们 这 个 例子 中 ，css 字段 列 出 的 样式 表 文 件 和 源 文件 在 同一 个 目录 下 。 如 果 
使 用 了 预 处 理 器 ， 比 如 SASS 或 者 Less， 源 文件 目录 应 该 指向 SASS 或 者 Less 文 件 ， 但 
是 css 字段 应 该 指向 编译 生成 的 CSS 样式 表 。 


在 配置 过 程 的 最 后 ， 我 们 将 为 package.json 添加 一 条 命令 ， 用 来 通知 KSS 构建 模式 库 。 在 
package.json 文件 的 scripts 部 分 添加 一 条 记录 ， 如 代码 清单 10-3 所 示 。 


代码 清单 10-3 ”在 package.json 中 添加 构建 脚本 








"scripts": { 
"build": "kss --config kss-config.json", < 定义 构建 命令 
"test": "echo \"Error: no test specified\" && eXlL 1" 


Fa 


这 样 就 添加 了 一 条 构建 命令 。 在 终端 里 运行 npm run builda， 就 可 以 通知 NPM 启动 KSS 
(在 node modules 日 录 中 )， 加 载 传递 过 来 的 KSS 配置 文件 了 。 然 而 运行 以 后 我 们 发 现 报销 了 : 
“Error: No KSS documentation discovered in source files.”。 这 是 因为 KSS 找 不 到 文档 ， 我们 现在 就 
开始 编写 文档 。 


10.1.2 编写 KSS 文 档 


现在 要 添加 第 9 章 里 的 一 些 模块 到 模式 库 。 首 和 匈 添加 嫁 体 对 象 ， 效 果 如 图 10-2 所 示 。KSS 
构建 页 面 完成 以 后 ， 左 侧 的 目录 里 会 添加 媒体 项 ， 右 侧 会 演 染 文档 。 











224 第 10 章 ， 模式 库 


Section 1 


My pattern library Me d ia 


0 Overview 
1 Media 


Displays an image on the left and body content on the right. 


Example 


Strength 


Strength training is an important part of injury prevention. Focus on your 
core 一 especially your abs and glutes. 


<div class="media"> 
<img class="media__image" 
src="http://placehold,.it/150x150" /> 
<div class="media__body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention。 Focus on your core&smdash ; 
especially your abs and glutes. 
</p> 
</div> 
</div> 


Source: styles,. css, line 15 


图 10-2 ”媒体 模块 的 文档 


KSS 会 按照 特定 的 方式 在 样式 表 中 搜寻 注释 。 注 释 中 包含 了 标题 ( 通常 是 模块 名 称 )、 描 述 
信息 、 示 例 HTML 代码 和 用 来 表示 该 模块 在 目录 中 位 置 的 styleguiae 注释 。 这 几 个 部 分 之 间 
通过 空白 行 彼此 间隔 ,便于 KSS 区 分 它们 。 严 格 来 讲 ， 只 有 最 后 的 Styleguide 注释 是 KSS 必 
需 的 ， 但 是 通常 我 们 也 应 该 好 好 编写 其 余部 分 。 

把 代码 清单 10-4 中 的 代码 添加 到 css/styles.css 样式 表 中 , 其 中 包含 了 一 些 基础 样式 和 媒体 模 
块 。 模 块 样式 代码 的 上 面 就 是 为 KSS 提供 的 CSS 注释 块 。 


代码 清单 10-4 ”包含 KSS 文档 注释 的 媒体 对 象 


:root { 




















box-sizing: border-box; 


} 


7 
x : :beftore， 
x::after { 
box-sizing: inherit; 
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body { 
font-family: Helvetica, Arial, sans-serif; 


/* 
a -一 标题 (模块 名 称 ) 


Displays an image on the left and body content 描述 模块 及 
四 和 the Erg 其 用 途 
Markup: 
<div class="media"> 模块 使 用 方 

<img class="media image" 法 示例 


src="http://placehold.it/150x150" /> 
<div class="media body"> 
<h4>Strength</h4> 
<D> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 
especially your abs and glutes. 
</D> 
</div> 
</div> 


Styleguide Media Styleguide 注释 ， 以 Media 
7 命名 把 模块 添加 到 目录 


.media { 
padding: 1.5em; 
background-color: #eee; 
border-radius: 0.5em; 

} 

.media: :after f{ 
COINEETIE RS 
display: block; 
clear: both; 





.media _image { 
flLOat:. Left 
margin-right: 1.5em; 


.media bogdy { 
Overflow: auto; 
margin-top: 0; 


.media body > h4 { 
margin-top: 0; 
} 
在 终端 里 重新 运行 npm run build, KSS 会 生成 docs 目录 , 其 中 包含 一 个 section-media.html 
文件 ,在 浏览 器 中 打开 这 个 文件 就 可 以 看 到 模式 库 了 。KSS 同时 也 输出 了 一 条 警告 “No homepage 
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content found in homepage.md”, 后 面 会 讲解 如 何 解 决 这 一 问题 ,现在 我 们 来 看 看 文档 注释 的 部 分 ， 
前 面 的 几 行 如 下 所 示 。 


/* 
Media 





Displays an image on the left and body content 
on the right. 


注释 的 第 一 行 定 义 了 这 部 分 文档 的 Media， 后 面 的 一 段 文本 用 来 描述 模块 用 途 。 这 段 描述 文 
本 可 以 使 用 markdown 格式 ， 因 此 可 以 根据 个 人 意愿 添加 一 些 样式 ， 描 述 也 可 以 是 多 段 的 。 





markdown -一 种 通用 的 文本 格式 ， 通 过 添加 标记 来 生成 基础 样式 。 星 号 包 训 的 
文字 生成 斜体 ; 反 引 号 (、) 包 右 的 文字 标记 为 代码 。 可 以 访问 GitHub 网 站 的 页 面 


Markdown Cheatsheet 获取 完整 资料 。 








我 们 新 建 了 一 个 模块 , 可 以 通过 描述 文本 辐 其 他 开发 者 介绍 使 用 模块 时 需要 了 解 的 东西 。 有 
时 候 简 单 的 一 一 可 请 就 够 了 ， 但 有 时 候 我 们 可 能 需要 说 明 模 块 依赖 于 JavaScript， 或 者 需要 结合 其 
他 模块 一 起 使 用 。 这 是 与 样式 表 使 用 相关 的 文档 部 分 。 

描述 后 面 是 一 个 Markup :注释 。 后 面 紧 跟 一 大 段 HTML 代码 ， 用 来 举例 说 明 模块 的 用 法 。 
KSS 把 这 些 HTML 转化 成 模式 库 ， 以 便 读 者 预览 效果 。 接 下 来 ，HTML 代码 展示 为 可 读 性 良好 
的 格式 ， 读 者 可 以 复制 如 下 代码 。 


Markup: 
<div class="media"> 
<img class="media image" 
src="http://placehold.it/150x150" /> 
<div class="media body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 
especially your abs and glutes. 
</D> 
</div> 
</div> 


示例 中 具体 使 用 哪些 文字 和 图 片 不 重要 ， 只 要 用 来 向 开发 者 展示 如 何 使 用 模 志 就行。 在 这 里 
例子 里 ， 我 们 使 用 了 Placeholder 网 站 提供 的 通用 占 位 图 片 。 开 发 者 使 用 该 模块 的 时 候 ， 他 们 可 
以 替换 为 自己 需要 的 内 容 。 

重重 se HTML 片段 中 不 能 有 空白 行 ， 因 为 对 KSS 来 讲 ， 空 白 行 就 意味 着 markup 

这 部 分 结 来 了。 

KSS 注释 的 最 后 一 行 需要 包含 styleguiae 注释 ， 后 面 跟着 目录 标签 (本 例 中 是 Media ) 

如 下 注释 所 示 。 

















1 
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Styleguide Media 
ed 


这 必须 是 注释 块 的 最 后 一 行 。 如 果 没 有 这 一 行 ，KSS 就 会 忽略 整个 注释 块 。 

当 更 新 样式 表 的 时 候 , 也 需要 相应 地 修改 注释 文档 。 把 文档 放 在 源 代码 里 ,这 个 过 程 就 会 很 
顺利 。 新 增 一 个 模块 的 时 候 ， 同 时 新 增 一 个 文档 注释 块 。 每 次 修改 后 ， 都 要 重新 运行 npm run 
buila 命令 ， 生 成 模式 库 的 全 新 副本 。 


警告 KSS 生成 新 页 面 的 时 候 不 会 主动 删除 旧 页 面 。 如 果 重 命名 或 者 移动 源码 中 的 一 
部 分 文档 ，docs 目录 下 的 相应 文件 还 在 原 地 ， 与 新 文件 共存 。 我 们 刷新 浏览 器 的 时 候 ， 
要 确保 不 是 在 重新 加 载 旧 页 面 。 


因为 模式 库 和 它 展示 的 样式 “ 住 ” 在 一 起 ,所 以 任何 有 权限 访问 样式 表 的 开发 者 都 可 以 访问 
它 的 文档 。 而 你 可 能 希望 把 模式 库 放 在 网 上 ， 这 样 整 个 开发 团队 都 可 以 访问 了 。 


10.1.3 ”记录 模块 变 体 


下 面 我 们 来 记录 另 一 类 模块 ( 如 代码 清单 10-5 所 示 )。 首 先 从 上 一 章 引 入 按钮 模块 。 这 个 模 
块 提供 了 几 种 变 体 : 两 种 不 同 的 颜色 和 两 种 不 同 的 大 小 。KSS 提供 了 阐述 多 重 变 体 的 方法 ， 可 以 
在 模式 库 里 把 每 个 都 泻 染 出 来 。 最 终 的 效果 如 图 10-3 所 示 。 
Section 1 
Buttons 


Buttons are available in a number of sizes and colors. You may mix and match any size with any color. 














Examples 


Default styling 


.button--Success A green success button 


click here 





.button--danger A red danger button 





.button--small A small button 


.button--large A large button 


<button class="button [modifier cLass]">cLick here</button> 


图 10-3” 带 变 体 的 按钮 模块 
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按钮 模块 的 文档 注释 跟 之 前 的 类 似 , 但 我 们 需要 在 标记 后 面 添加 一 段 新 内 容 来 撒 述 每 个 修饰 
符 ( 如 代码 清单 10-5 所 示 )。 这 是 一 组 修饰 符 类 的 列表 ， 每 个 列表 项 后 面 跟着 一 个 连 字 符 和 相关 
描述 。 我 们 也 可 以 添加 {{tmodqifier_class}} 注 释 到 示例 标记 上 ， 指 明 修饰 符 类 所 属 的 位 置 。 


代码 清单 10-5 ”按钮 模块 及 其 文档 
/ 大 


Buttons 





Buttons are available in a number of sizes and 
Colors. You may mix and match any size with any 





GOLOE 

代表 修饰 符 
Ma 使 用 的 位 置 
<button class="button {{modifier class}}"> 


click here 
</button> 





.button--success - A green success button 
.button--danger - A red danger button 列 出 可 用 的 修 
.button--small - A small button 饰 符 

A 


.button--large = large button 





Styleguide Buttons 

wy 

.button { 
padding: lem 1.25em; 
border: lpx solid #265559; 
border-radius: 0.2em; 
background-color: transparent,; 
font-size: 0.8rem; 
COlor: #333; 
font-weight: bolgd; 

} 


.button--success { 
border-color: #cfe8c9; 
Color: #fff; 
background-color: #2f5926; 

} 


.button--danger { 
border-color: #e8c9c9; 
COolor: #f£fff; 
background-color: #a92323; 

} 


.button--small { 
font-size: 0.8rem; 


} 


.button--large { 
font-size: 1.2rem; 


} 
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KSS 扫描 已 定义 的 修饰 从 类 列表 ， 把 每 一 个 都 展示 到 模式 库 中 。{ {modifier_class}} 指 
明 放 置 修饰 符 类 的 位 置 。( 如 果 你 熟悉 handlebars 模板 ， 这 种 语法 看 上 去 有 点 类 似 ，KSS 就 是 使 
用 这 种 语法 在 后 台 处 理 模 块 的 。) 运行 npm run builg 重新 构建 模式 库 ， 然 后 在 浏览 器 里 查看 
文档 。 

提示 “每 次 修改 完 再 重新 运行 KSS 也 是 一 件 很 烦 的 事情 。 如 果 你 的 项 目 里 使 用 了 类 似 

于 Gulp 的 任务 管理 工具 ， 那 么 建议 你 配置 一 个 监测 更 新 的 任务 ， 自 动 重 新 运行 KSS。 

大 部 分 的 任务 管理 器 有 插件 或 者 其 他 机 制 来 实现 这 样 的 功能 。 





模式 库 目 录 ( docs/index.html ) 里 现在 应 该 已 经 有 3 项 了 : Overview、Buttons 和 Media， 其 
中 后 两 个 分 别 链接 到 我 们 之 前 写 的 对 应 的 文档 。Overview 的 链接 是 损坏 的 , 因为 我 们 还 没有 创建 
主页 。 这 也 是 之 前 为 什么 会 出 现 “No homepage content” 的 警告 。 


10.1.4 创建 概览 页 面 


下 面 为 模式 库 添加 主页 。 在 css 目录 下 面 新 建 一 个 名 为 homepage.md 的 文件 。 这 是 一 个 
markdown 格式 的 文件 ， 用 来 整体 介绍 模式 库 。 复 制 代 码 清单 10-6 到 文件 中 。 
代码 清单 10-6 ”主页 markdown 


# Pattern library _ 
页 面 标题 


This is a collection of all the modules in ou 











stylesheet. You may use any of these modules when 
constructing a page. 


现在 运行 npm run build 命令 ， 主 页 内 容 找 不 到 的 警告 应 该 已 经 消失 了 。 如 采 在 浏览 器 里 
打开 docs/index.html， 可 以 看 到 生成 的 内 容 。 

在 实际 项 目 中 , 使 用 index.html 页 面 作为 模式 库 的 介绍 。 我 们 可 以 为 用 户 提 供 使 用 说 明 ， 如 
何在 页 面 中 引入 一 个 或 多 个 样式 表 ， 如 何 正确 引入 Web 字体 (参见 第 13 草 ), 或 者 其 他 任何 可 
以 帮助 开发 者 熟悉 我 们 样式 表 的 说 明 。 

你 可 能 会 注意 到 目录 中 Overview 链接 仍然 不 能 工作 ， 因 为 现在 是 在 磁盘 上 和 耻 接 打 开 模 式 库 
文件 ，KSS 把 Overview 链接 指 回 了 .7 而 不 是 index.html。 要 解雇 这 个 问题 ， 我们 需要 通过 HTTP 
服务 器 访问 模式 库 ， 这 样 . /在 浏览 希 里 会 链接 到 index.html。 这 个 就 留 给 你 目 己 解决 吧 ， 用 你 最 
玖 悉 的 工具 。 如 末 你 不 确定 从 哪儿 下 手 ， 可 以 试 试 http-server 的 npm 包 。 


























10.1.5 “记录 需要 JavaScript 的 模块 


有 些 模块 需要 JavaScript 配合 一 起 工作 。 这 时 候 ， 要 为 页 面 添加 一 些 价 单 的 JavaScript 来 演 
示 模 块 的 行为 。 没 必要 在 模式 库 里 引入 一 个 功能 齐全 的 JavaScript 库 。 大 多 数 情 况 下 ， 切 换 不 同 
的 状态 类 就 够 了 。 我 们 之 前 已 经 在 kss-config.json 的 配置 里 为 页 面 添加 了 一 个 JavaScript 文件 。 
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Wi 和 [ 
"../js/docs.jJs" 
] 


KSS 会 把 js 数组 里 列 出 的 所 有 脚本 文件 都 添 加 到 页 面 上 。 我 们 可 以 把 代码 写 到 这 些 脚本 文 
件 中 , 为 模块 提供 最 基本 的 功能 。 下 面 演示 一 下 , 我 们 将 在 样式 表 里 新 增 下 拉 模 块 (参见 第 9 鞋 ) 
以 及 对 应 的 注释 文档 (如 代码 清单 10-7 所 示 )。 为 了 实现 点 击 按钮 时 打开 和 关闭 下 拉 框 ， 我们 要 
加 入 一 些 JavaScript。 然 后 就 可 以 在 模式 库 中 查看 模块 ， 实 现 我 们 想 要 的 功能 ( 如 图 10-4 所 示 )。 








Example 


Open menu < 


Drawer contents 
<div class="dropdown"> 


<button class="dropdown__togc 





图 10-4 模式 库 中 的 下 拉 沫 单 〈 注 意 : 下拉 框 的 内 容 没 有 写 样式 ， 因 为 我 们 希望 有 
其 他 独立 的 模块 来 演 染 菜单 ) 


把 代码 清单 10-7 中 的 样式 和 注释 文档 添加 到 样式 表 。 关 于 JavaScript 如 何 工 作 , 也 有 必要 给 
出 一 些 说 明 。 开 发 者 据 此 来 了 解 如 何在 网 站 或 者 Web 应 用 程序 中 使 用 模块 ， 他 们 需要 足够 的 信 
息 才 能 正确 实现 它 。 


代码 清单 10-7 下 拉 模 块 及 其 文档 











/* 

Dropdown 

A dropdown menu. Clicking the toggle button opens 提供 说 明 ， 引 导 开 发 者 
and closes the drawer. 如 何 使 用 JavaScript 


z | z 操作 该 模块 
Use JavaScript to toggle the is-open class in 
order to open and close the dropdown. 


Markup: 标记 示例 

<div class="dropdown"> < 
<button class="dropdown toggle">Open menu</button> 
<div class="dropdown drawer"> 





Drawer contents 


</div> 
</div> 
Styleguide Dropdown 下 拉 模 块 样式 规则 
*/ (从 第 9 章 复 制 ) 
.dropdown { 


display: inline-block; 
position: relative; 


】 


.dropdown toggle { 
padding: 0.5em 2em 0.5em 1.5em; 
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border: lpx SolLl1dq #ccc; 
font-size: lrem; 
background-color: #eee; 


) 


.dropdown toggle: :after { 
COMEeENGS .™™” 
position: absolute; 
right: lem; 
top: lem; 
border: 0.3em solid; 
border-color: black transparent transparent,; 


} 


.dropdown drawer { 
display: none; 
position: absolute; 
EE .00 
top: 2.1em; 
min-width: 100%; 
background-color: #eee; 


} 


.dropdown.is-open .dropdown toggle::after { 
toB: "03.7em: 
border-color: transparent transparent black; 


} 
.dropdown.is-open .dropdown drawer { 
display: block; 
} 
运行 npm run builg 构建 文档 , 但 是 此 刻 页 面 还 是 静态 的 。 我们 把 JavaScript 加 到 js/docs.js 
中 ， 计 页 面 动 起 来 。 将 代码 清单 10-8 添加 到 该 文件 中 。 


代码 清单 10-8 ”演示 模块 功能 的 简短 JavaScript 





获取 所 有 dropdown toggle 


安 钮 的 实 僵 
Ce 按钮 的 实例 
var dropdowns = document .querySelectorAll('.dropdown toggle'); 
Array .prototype.forEach.call (dropdowns, function(dropdown) { 
dropdown.addEventListener('click', function (event) { 
event .target .parentNode.classList.toggle('is-open'); 六 本 上 全 站 人 
上 单 击 事件 监听 器 


:2 
)) 在 dropdown 元 素 上 
) 


} ()) | 切换 is-open 类 


单 击 触 发 大 按钮 时 , 脚本 会 切换 dropdown 元 条 上 的 is-open 类 。 实际 项 目 中 的 完整 实现 需 
要 更 多 的 代码 ,需要 考虑 延 时 展现 或 者 点 击 页面 其 他 地 方 时 关闭 沫 单 。 这 里 重申 一 下 ,在 模式 库 
中 ，JavaScript 代码 应 该 是 最 少 的 , 但 是 要 确保 打开 和 关闭 状态 的 样式 正确 。 做 完了 这 些 , 你 (或 
者 其 他 开发 者 ) 就 可 以 专注 于 处 理 JavaScript 的 那些 细节 问题 ， 这 属于 模式 库 之 外 的 工作 了 。 
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10.1.6 ”为 模式 库 分 组 


你 可 以 继续 添加 第 9 章 的 模块 到 样式 表 , 必要 的 时 候 插 入 注释 文档 。 因 为 你 现在 已 经 对 整个 
流程 有 了 基本 了 解 ， 所 以 我 不 会 手把手 带 你 完成 每 个 模块 了 。 

组 织 模式 库 是 需要 完成 的 最 后 一 件 事 。 图 10-4 里 面 的 菜单 现在 看 上 去 还 可 以 ， 因 为 只 有 几 
项 ， 但 是 随 肴 项 目 规模 越 来 越 大 ， 就 有 必要 为 模块 进行 分 类 ， 以 便 查找 。 

下 面 为 工具 类 添加 注释 文档 。 每 个 工具 类 都 需要 单独 解释 和 展示 ， 现 在 把 它们 归 到 一 组 。 在 
代码 清单 10-9 中 ， 我 们 新 增 了 一 个 文档 叫 Utilities， 把 每 个 工具 类 作为 子 项 添加 进去 ， 最终 实现 
的 效果 如 图 10-5 所 示 。 























My pattern library 


0 Overview 
1 Buttons 

2 Dropdown 
3 Media 

4 Menu 

5 Message 
6 Uitilities 


| 6.1 Text center 


6.2 Clearfix 
6.3 Float left 


图 10-5 _ Utilities 文档 中 的 三 个 分 组 








在 Styleguide 注释 中 使 用 圆 点 来 创建 子 项 ,类 似 于 Styleguide Utilities.clearfix。o 
这 样 文档 注释 块 就 生成 了 Utilities 项 的 一 个 Clearfix 子 项 。 


说 明 KSS 最 多 支持 条 目 层 级 深度 为 三 级 (例如 Utilities.alignment.text-center ), 


添加 代码 清单 10-9 到 样式 表 ， 其 中 包含 了 三 个 工具 类 a ol se | 
clearfix ) 及 其 文档 注释 。 注 意 新 增 了 weight 注释 ， 用 来 控制 文档 排列 顺序 。 


代码 清单 10-9 ”为 相同 类 型 的 文档 分 组 
/* 


Text center 








Center text within a block by applying .text-center. 





Markup: 
<p class="text-center">Centered text</p> 
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Weight: 1 
Styleguide Utilities.text-center < 一 
7 


使 用 圆 点 符号 把 每 个 
文档 块 归 为 同一 组 


.text-center { 
text-align: center !important; 


} 





使 用 weight 注释 来 


二 控制 文档 排列 顺序 


Float left 
Float an element to the left with ‘float-left. 
Weight: 3 


Styleguide Utilities.float-left 
4 
.float-left { 
float: left; 
} 


/大 

Clearfix 

Add the class ‘clearfix to an element to force it to 使 用 圆 点 符号 把 每 个 
contain its floated contents 文档 块 归 为 同一 组 
Markup: 


<div class="clearfix"> 
<span class="float-left">floated</span> 





</div> 
. 使 用 weight 注释 来 
Welight: 2 吐 
控制 文档 排列 顺序 
Styleguide Utilities.clearfix 
Wy 


.Clearfix: :before, 
.Clearfix: :after { 
Content: ™ "; 
display: table; 
} 


.Clearfix: :after { 
clear: both; 
ly 


把 所 有 的 这 些 工 具 类 都 归 类 到 一 个 主 类 中 ， 它 们 就 会 形成 一 个 分 组 。 现 在 重新 构建 模式 库 ， 
就 会 发 现 工具 类 都 在 日 录 里 的 Utilities 项 下 面 ， 扣 击 子 项 就 可 以 查看 相应 的 页 面 。 


警告 stylegquide 注释 区 分 大 小 写 。 如 果 想 把 多 个 子 项 放 入 同一 个 分 组 目录 ， 要 确 
保 分 组 名 称 始终 首 字 母 大 写 ， 否 则 KSS 会 创建 不 同 的 分 组 (例如 ， 一 个 叫 “Utilities”， 
另 一 个 中 “utilities”)。 
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默认 情况 下 ，KSS 模式 库 的 目录 是 按 字母 顺序 排序 的 ， 分 组 内 的 子 项 也 是 这 样 。 我 们 使 用 
weignht 标识 来 改变 排序 。KSS 会 根据 weight 的 值 来 重新 排序 ， 值 越 大 越 徘 后 。 你 可 以 通过 调 
整 weignht 值 来 更 改 某 个 一 级 目录 项 在 整个 目录 中 的 位 置 ， 或 者 〈 就 像 示例 中 那样 ) 控制 某 个 分 
组 内 子 项 的 排列 顺序 。 

我 们 现在 已 经 介绍 了 KSS 的 所 有 基本 特性 ， 如 果 你 想 要 更 深入 地 人 研究 一 下 ， 可 以 妾 试 在 模 
式 库 本 身 的 观感 上 实现 更 多 的 控制 ， 比 如 日 定义 模式 库 内 部 的 样式 表 , 或 者 定制 模式 库 页 面 构建 
的 模板 。 可 以 查看 GitHub 网 站 里 的 相关 文档 获取 更 多 信息 。 


10.2 ”改变 编写 CSS 的 万 式 


模式 库 对 于 小 项 目 来 说 可 有 可 无 , 但 是 实践 证 明 它 在 大 项 目 中 非常 有 用 。 你 如 果 正 在 开发 一 
个 有 着 成 百 上 千张 页 面 的 网 站 , 就 不 可 能 每 次 写 的 样式 都 一 样 。 然 而 一 旦 建立 了 可 复 用 的 模块 并 
上 且 专 门 写 了 文档 ， 那 就 为 后 面 要 写 的 大 量 的 网 页 提供 了 工具 。 

如 果 你 和 很 多 开发 者 一 起 合作 开发 大 型 Web 应 用 程序 ， 难 免 会 出 现 组 件 类 名 冲突 和 大 量 相 
同 UI 的 重复 实现 。 如 果 有 了 模式 库 ， 开 发 者 可 以 很 方便 地 找到 和 复 用 别人 的 样式 ， 系 统 化 地 命 
名 ,不 再 出 现 类 名 冲突 。 

内 容 编 辑 和 开发 者 使 用 你 的 模式 库 时 ， 甚 至 都 不 需要 学 习 CSS， 只 需要 对 HTML 有 基本 的 
了 解 即 可 。 他 们 使 用 的 时 候 可 以 直接 复制 模式 库 里 的 源码 ， 放 到 页 面 里 需要 的 地 方 。 模块 化 CSS 
是 编写 大 规模 CSS 的 核心 ， 模 式 库 是 保证 这 些 模 块 条 理 清晰 、 使 用 方便 的 手段 。 


10.2.1 CSS 优 先 的 工作 流程 


使 用 模式 库 是 从 传统 的 CSS 开发 方式 转变 而 来 的 一 种 解决 方案 。 不 同 于 之 前 的 先 写 HTML 
页 面 再 写 样 式 ， 我们 实现 了 模块 化 的 样式 ， 然 后 使 用 这 些 模块 拼装 成 Web 页 面 。 我 把 这 种 解决 
方案 称 为 CSS 优先 ( CSS First ) 开发 方式 ， 先 写 CSS， 而 不 是 HTML。 你 可 以 (并 且 应 该 ) 按 
照 模式 库 的 方式 开发 CSS， 然 后 在 项 目 中 使 用 这 些 CSS。 开 发 流程 大 概 是 下 面 这 样 。 

(1) 页 面 开 发 时 ， 先 有 一 个 草图 或 者 原型 图 或 者 其 他 可 以 展示 页 面 的 设计 方式 。 

(2) 看 看 模式 库 。 找 找 现 有 模块 ， 如 果 有 满足 页 面 需求 的 模块 就 直接 使 用 。 然 后 从 页 面 的 外 层 
(主页 面 布 局 和 容 融 ) 开始 , 按 目 己 熟 悉 的 方式 编写 CSS。 如 果 使 用 现 有 模块 可 以 构建 整个 页 面 ， 
就 不 需要 写 新 的 CSS 了 。 

(3) 你 会 发 现 有 时 候 需要 用 到 一 些 模式 库 提供 不 了 的 功能 。 项 目 开发 早期 这 种 情况 很 常见 ， 到 
后 面 就 会 少 很 多 。 这 时 候 就 需要 开发 一 个 或 几 个 新 模块 , 或 者 现 有 模块 的 新 变 体 。 暂停 正在 编写 的 
页 面 开发 ， 先 在 模式 库 中 实现 这 个 模块 。 为 新 模块 书写 文档 ， 确 保 它 的 外 观 和 行为 跟 需 求 一 致 。 

(4) 回 到 页 面 开 发 ， 使 用 刚 写 的 新 样式 并 且 添 加 新 模块 到 页 面 上 。 

这 种 开发 方式 有 几 个 好 处 。 第 一 , 为 网 站 提供 一 致 性 更 好 的 界面 。 模式 库 嘉 励 开发 者 复 用 已 
有 的 样式 ， 而 不 是 重新 开发 。 比 如 说 ,不 应 该 为 网 站 上 10 个 不 同 的 页 面 编写 10 套 不 同 的 列表 样 
式 , 我 们 更 倾 问 于 复 用 仅 有 的 儿 套 列表 。 这 种 开发 方式 会 强迫 你 停 下 来 思考 , 是 否 需要 新 的 样式 ， 
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现 有 的 模块 是 否 可 以 满足 需求 。 

第 二 ， 当 你 按照 模式 库 的 方式 开发 模块 的 时 候 , 你 可 以 孤立 地 看 竺 问题。 你 会 从 一 个 特定 的 
Web 页 面 中 脱离 出 来 , 聚焦 在 为 一 个 模块 写 样式 这 样 的 单一 任务 上 。 不 同 于 解决 某 个 页 面 上 的 某 
个 特定 问题 ,思考 新 模块 可 能 会 用 在 什么 地 方 会 比较 容易 一 些 。 你 会 创建 一 个 更 通用 、 可 复 用 性 
更 好 的 方案 。 

第 三 ， 这 种 开发 方式 允许 团队 里 一 部 分 成 员 专 注 于 开发 CSS。 对 CSS 不 太 熟 悉 的 开发 者 可 
以 把 一 部 分 工作 移交 给 经 验 更 丰富 的 人 。 擅 长 CSS 的 开发 者 每 完成 一 个 模块 ， 就 可 以 向 其 他 人 
发 送 一 个 链接 ， 指 问 模 式 库 里 的 模块 位 置 。 

第 四 ， 这 种 开发 方式 可 以 确保 文档 是 最 新 的 。 模 式 库 的 页 面 是 你 测试 CSS 修改 结果 的 地 方 ， 
这 意味 着 这 些 页 面 会 一 直 呈 现 出 最 新 的 正确 行为 。 修 改 CSS 的 时 候 ， 文 档 恰 好 就 在 劳 边 的 注释 
块 里 ， 这 样 很 容易 保持 文档 也 是 最 新 的 〈 后面 会 谈 到 如 何 修改 现 有 的 模块 )。 

经 常 有 开发 者 问 到 ， 如 何 编写 HTML 才能 更 容易 匹配 样式 。 我 认为 这 种 提 法 本 喘 就 是 有 问 
题 的 。 相 反 , 应 该 问 如 何 编写 样式 才能 更 好 地 复 用 到 任意 页 面 上 。 我 们 应 该 先 写 好 CSS, 结构 民 
好 的 HTML 自然 就 有 了 。 


10.2.2 ” 像 AP| 一 样 使 用 模式 库 

当 你 使 用 模式 库 开发 的 时 候 , 相当 于 你 正在 维护 一 组 与 CSS 交互 的 APl, 每 个 模块 会 附带 一 
些 类 名 和 少量 的 DOM 结构 。 只 要 相关 的 HTML 部 分 遵照 这 种 结构 来 编写 , 样式 表 就 会 正确 地 演 
染 样式 (如 图 10-6 所 示 )。 





























Example 


Open menu ~ 


<div class="dropdown"> 
<button class="dropdown__toggle">0pen menu</button> 
<div class="dropdown__drawer"> 
Drawer contents 
</div> 
</div> 


图 10-6 类 名 和 HTML 结构 就 是 API 


API- 应 用 程序 接口 ， 是 指 一 组 预先 定义 好 的 子 程 序 ， 可 以 用 来 调用 系统 功能 或 
与 系统 交互 。API 一 般 和 包含 方 法 名 和 参数 ( 在 编程 语言 中 ),， 或 者 包含 URL 和 查询 





参数 (在 HTTP API 中), 我 在 描述 模块 化 CSS 的 时 候 也 使 用 了 API 的 说 法 ， 是 为 
了 阅 明 HTML 代码 是 通过 类 名 和 HTML 元 素 连 接 CSS 样式 的 。 





每 个 模块 里 都 包含 一 段 HTML 示例 代码 ， 用 来 描述 约定 好 的 CSS 和 HTML 的 搭配 格式 。 这 
段 代码 展示 了 HTML 和 CSS 是 如 何 一 起 工作 的 。 
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创建 模块 的 时 候 ，API 的 结构 是 最 重要 的 部 分 ， 因 为 后 面 很 难 再 修改 。 当 然 ，HTML 有 可 以 
随意 修改 的 地 方 : 每 个 元 素 里 的 内 容 可 以 任意 改变 。 有 些 情 况 下 , 模块 里 的 DOM 元 素 可 以 增加 、 
移 除 甚至 改变 排序 ( 如果 元 素 是 可 选 的 或 者 可 以 改变 顺序 ， 一 定 要 在 文档 中 明确 说 明 )。HTML 
还 可 以 移 除 整个 模块 ， 重 新 写 一 个 不 同 的 模块 。 

CSS 同样 也 有 可 以 修改 的 地 方 。 可 以 做 一 些小 的 改变 ， 比 如 增 大 内 间距 、 调 整 颜色 或 者 修复 
bug。 也 可 以 做 比较 大 的 修改 ， 比 如 重 构 媒体 对 象 ， 不 使 用 浮动 了 , 改 用 Flexbox, 或 者 重新 设计 
模块 ， 把 横向 排列 改 成 纵向 排列 。 只 要 API 的 核心 部 件 (类 名 和 DOM 结构 ) 没有 改变 ， 就 可 以 
把 CSS 任意 修改 成 自己 想 要 的 效果 。 

做 出 的 这 些 修改 会 影响 到 网 站 的 很 多 地 方 跟 者 变化 , 但 是 只 要 HTML 按照 API 的 结构 书写 ， 
这 些 变 化 就 会 符合 预期 。 如 果 你 想 改 变 网 站 上 所 有 的 下 拉 菜 单 的 外 观 ， 那 么 这 可 以 很 容易 实现 ， 
因为 网 站 上 所 有 的 下 拉 菜 单 都 使 用 了 相同 的 模块 ( 和 相同 的 API )， 相 应 的 变化 是 一 致 的 。 


1. 编辑 已 有 模块 
下 面 来 演示 一 下 , 假设 这 样 一 个 场景 , 你 想 要 修改 媒体 模块 的 展示 形式 ,之 前 只 有 一 张 图 片 ， 
现在 需要 支持 两 张 图 片 ， 文 字 内 容 的 两 侧 各 有 一 张 ， 如 图 10-7 所 示 。 





























Strength 


Strength training is an important part of injury 
prevention. Focus on your core— especially your 
abs and glutes. 


图 10-7 一 个 假设 的 媒体 对 象 ， 包 含 两 张 图 片 


这 需要 修改 一 下 CSS。 只 要 确保 修改 后 的 CSS 仍然 支持 API ( 这 里 是 指 , 网 站 上 现 有 的 媒体 
对 象 只 有 一 张 图 片 ， 依 旧 可 以 正常 工作 )， 就 可 以 随意 修改 样式 。 我 们 使 用 Flexbox 重 构 模块 ， 
步 又 如 下 。 

首先 , 我 们 需要 为 注释 块 里 的 示例 代码 增添 内 容 。 旧 的 示例 代码 不 要 动 ， 因 为 改 完 还 要 测试 
之 前 的 内 容 是 否 保 持 不 变 。 现 在 我 们 添加 第 二 个 示例 来 测试 新 的 行为 ， 按 代码 清单 10-10 来 更 新 
文档 注释 块 。 
代码 清单 10-10 ”在 文档 中 添加 新 的 媒体 示例 





























/ 大 

Media 更 新 描述 信息 ， 
允许 多 个 图 片 

Displays images and/or body content beside one 

another. 

Markup: 保持 之 前 的 标记 


<div class="media"> 示例 不 变 


10.2 ”改变 编写 CSS 的 方式 237 


<img class="media _image" 
src="http://placehold.it/150x150" /> 
<div class="media body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 
especially your abs angd glutes. 


</p> 
</div> 司 
</div> 增加 新 的 示例 代码 ， 
<div class="media"> 包含 两 张 图 片 


<img class="media _image" 
src="http://placehold.it/150x150" /> 
<div class="media body"> 
<h4>Strength</h4> 
<p> 
Strength training is an important part of 
injury prevention. Focus on your core&mdash; 
especially your abs and glutes. 
</D> 
</div> 
<img class="media _image" 
src="http://placehold.it/150x150" /> 
</div> 





Styleguide Media 
#7 
这 有 段 代码 在 模式 库 中 实现 了 两 个 模块 实例 。 重新 构建 模式 库 , 然后 查看 生成 的 文档 效果 。 在 
没有 修改 CSS 代码 之 前 , 你 会 发 现 一 个 实例 是 好 的 , 男 一 个 并 非 预 期 效 采 。 接 下 来 继续 修改 CSS 
( 见 代码 清单 10-11 )， 让 两 个 实例 都 正常 工作 。 之 后 就 可 以 看 到 如 图 10-8 展示 的 效果 。 0 











Example 


Strength 


Strength training is an important part of injury prevention. Focus on your 
core— especially your abs and glutes. 


Strength 
Strength training is an important part of injury 


prevention. Focus on your core— especially your 
abs and glutes. 


<div class="media"> 


图 10-8 模式 库 中 演示 了 两 种 不 同类 型 的 媒体 对 象 
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模式 库 现 在 扮演 了 一 个 类 似 于 球场 围栏 的 角色 ， 它 可 以 告诉 你 对 CSS 的 修改 是 否 破 坏 了 网 
站 上 已 有 的 媒体 对 象 ， 同 时 检验 新 代码 是 否 有 效 。 
现在 可 以 重 构 CSS 来 实现 新 的 媒体 场景 。 修 改 样式 表 除了 让 第 二 个 实例 正常 工作 ， 还 要 确 
保修 改过 程 中 不 破坏 第 一 个 实例 。 


代码 清单 10-11 使 用 Flexbox 重 构 媒体 模块 

















.media { 
display: flex; 
align-items: flex-start.; < 把 容器 修改 为 弹性 容器 ，media_ image 
baddlnoy 1. Dem 和 media body 就 会 自动 成 为 弹性 元 素 


background-color: #eee; 
OC De 设置 弹性 元 素 顶 端 对 齐 ， 而 不 是 拉 伸 填充 
} 满 容器 高 度 ， 防 止 图 片 变 形 





.media > * + * { 
margin-left: 1.5em; 
} 
移 除 图 片 的 右 侧 外 边 距 ， 取 而 代 之 的 是 为 
.media body ({ 所 有 弹性 元 素 之 间 添 加 相同 的 外 边 距 
margin-top: 0; 


’ 


.media body > h4 { 
margin-top: 0; 


} 


运行 npm run build， 然 后 打开 模式 库 的 页 面 查看 效果 ， 可 以 看 到 修改 成 功 了 。 媒 体 对 象 
现在 也 可 以 算是 多 功能 的 了 。 因 为 我 们 依旧 支持 之 前 的 模块 API， 所 以 就 可 以 不 用 担心 破坏 已 完 
成 的 页 面 。 

如 采 没 有 模块 化 CSS 和 模式 库 ， 修 改 CSS 就 可 能 会 造成 网 站 样式 混乱 ， 我 们 没 办 法 查 明 为 
什么 HTML 到 处 都 是 , 也 不 确定 选择 各 是 否 还 能 找到 正确 的 元 系 。 有 了 这 些 稳定 不 变 的 API, 配 
合 模 式 库 文档 ， 再 修改 CSS 就 会 变 得 轻松 愉悦 。 


2. 使 用 语义 版 本 和 重 构 代码 

有 时候 为 了 改 成 想 要 的 效果， 我 们 不 得 不 修改 API。 这 也 可 以 ,就 是 需要 多 做 点 工作 , 但 是 
最 起 人 码 可 行 。 可 以 先 做 完 修 改 ， 然 后 找 遍 整个 网 站 或 者 应 用 程序 ， 把 每 个 模块 实例 的 HTML 都 
更 新 一 下 ， 让 它们 符合 新 的 API。 但 是 我 发 现 大 部 分 情况 下 较 好 的 解决 办 法 是 佐 用 这 个 模块 ( 需 
要 在 文档 中 说 明 一 下 )， 然 后 创建 一 个 全 新 模块 来 实现 所 需 的 新 功能 。 这 样 一 来 ， 旧 模块 可 以 在 
之 前 用 到 的 地 方 继续 工作 ， 开 发 新 页 面 就 迁移 到 新 模块 ， 因 为 新 的 模块 支持 全 部 功能 。 

为 了 更 方便 地 使 用 这 种 开发 方式 ,我 们 用 一 个 三 位 数字 的 语义 版 本 ( semver ) 来 为 CSS 设置 
版 本 号。 一旦 版 本 号 变 了 ,开发 者 卓然 就 知道 模块 内 容 改 变 了 。 
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语义 版 本 Semantic Versioning 的 简写 ， 一 种 软件 包 版 本 命名 格式 ， 使 用 圆 点 分 
隔 的 三 个 数字 表示 (例如 1.4.2 )。 三 个 数字 分 别 代 表 主 版 本 号 、 次 版 本 号 和 修订 号 。 





可 以 访问 Semantic Versioning 网 站 查看 更 多 信息 。 





我 们 如 果 只 做 一 些小 修改 〈 比 如 修改 bug )， 就 增加 修订 版 本 号 ( 例如， 从 1.4.2 到 1.4.3); 
如 果 添 加 了 新 的 模块 或 功能 ， 但 是 没有 修改 API， 或 者 某 个 模块 被 标 为 废弃 ， 就 增加 次 版 本 号 ， 
把 修订 版 本 号 设置 为 0( 例 如， 从 1.4.2 到 1.5.0 ); 如 果 过 滤 了 一 遍 样 式 表 文件 把 废弃 模块 都 删除 
了 ， 就 需要 直接 跳 到 下 一 个 主 版 本 号 (例如 ， 从 1.4.2 到 2.0.0 )。 有 时 候 我 们 做 了 大 量 的 外 观 设 
计 修 改 〈 比 如 网 站 重新 设计 了 )， 这 时 候 也 需要 升级 主 版 本 号 ， 即 使 API 还 保持 原样 。 

实际 上 ,， 版 本 管理 可 以 采用 多 种 方式 。 这 取决 于 项 目的 实际 情况 ,在 什么 地 方 使 用 样式 。 如 
果 要 在 NodeJS 包 或 者 Ruby Gem 里 引入 CSS， 那 就 使 用 相应 的 系统 构建 的 版 本 。 如 果 想 通过 服 
务 需 提供 CSS 融 态 访问 ,可 以 在 URL 中 包含 版 本 号 (例如 http://example.com/ess/1.4.2/styles.css )， 
同时 支持 多 个 版 本 。 

有 了 版 本 控制 ， 就 可 以 按照 需求 配置 项 目 使 用 任意 版 本 的 CSS 了 。 你 可 以 发 布 一 个 包含 重 
大 改动 的 3.0.0 新 版 本 , 但 是 Web 应 用 程序 中 可 以 继续 使 用 旧版 本 ， 直 到 开发 者 更 新 一 遍 HTML 
升级 所 有 使 用 的 废弃 模块 。 如 果 不 升 级 应 用 程序 中 引入 的 样式 表 的 版 本 ，CSS 的 修改 就 不 会 破坏 
应 用 程序 的 正常 显示 。 

模式 库 文档 列 出 了 样式 表 的 使 用 方法 ， 但 是 HTML 开发 者 可 以 决定 是 否 使 用 样式 表 提 供 的 
样式 ， 或 者 使 用 哪个 版 本 的 样式 。 也 就 是 说 ，HTML 和 CSS 是 解 耦 的 。CSS 一 定 先 开发 出 来 ， 
然后 才 可 以 用 到 HTML 中 ， 而 HTML 也 可 探 ， 可 以 选择 何 时 应 用 新 样式 。 这 就 是 CSS 优先 的 开 
发 方式 的 好 处 。 

修改 模式 库 的 时 候 , 最 好 不 要 一 个 人 自行 决定 。 和 团队 里 其 他 开发 者 沟通 一 下 ， 青 决定 是 否 
弃 用 或 者 删除 某 个 模块 。 我 们 需要 通过 收集 他 人 的 信息 来 判断 哪些 模块 是 有 用 的 , 哪些 已 经 不 再 
需要 了 。 

































































Bootstrap 、Foundation 等 框架 

你 可 能 对 某 个 或 多 个 CSS 框架 比较 熟悉 , 这 类 框架 都 提供 了 一 套 预 先 封装 好 的 样式 。 这 些 样 
式 一 般 包 括 按钮 表单、 菜单 列表 和 一 套 网 格 系统 CSS 框架 有 很 多 ,其 中 比较 流行 的 有 Bootstrap、 
Foundation、Pure 等 。 有 的 框架 功能 丰富 ， 提 供 了 很 多 模块 ; 有 的 框架 相对 简单 ， 只 提供 了 基 
本 的 功能 。 

一 旦 开始 建立 自己 的 模式 库 , 你 可 能 会 发 觉 , 仿佛 正在 建 一 个 自己 的 框架 。 没 错 , 就 是 这 
样 ! 这 也 正 是 为 什么 这 些 框架 都 是 成 功 的 ， 因 为 它们 每 一 个 都 是 模式 库 。 框 架 里 面 的 CSS 样 
式 , 都 是 为 了 可 以 在 多 种 场景 下 可 复 用 而 特意 编写 的 。 虽然 有 一 些 框 架 并 不 是 非常 严格 地 按照 
模块 化 CSS 的 原则 来 编写 ， 但 在 一 定 程度 上 ， 所 有 的 框架 都 是 模块 化 的 。 还 有 ， 它 们 都 包含 
版 本 控制 。 
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这 些 框架 和 个 人 的 模式 库 之 间 的 不 同 是 , 框架 更 通用 ,在 模式 库 里 ,模块 是 为 项 目 定制 化 
的 ， 可 以 更 好 地 契合 项 目 使 用 ， 带 有 项 目 本 身 特 有 的 观感 。 比 如 你 可 以 根据 需要 创建 两 个 不 同 
类 型 的 板块 模块 ， 再 有 其 他 需要 还 可 以 很 快 改写 更 多 。 

总 有 开发 者 问 我 ， 到 底 需 不 需要 使 用 Bootstrap 这 样 的 框架 。 我 会 回答 ， 既 需要 也 不 需要 。 

框架 有 助 于 项 目 快速 起 步 。 你 不 需要 做 多 少 工作 , 就 可 以 获取 现成 的 按钮 、 板 块 和 下 拉 菜 
单 。 但 是 根据 我 的 经 验 , 框架 从 来 都 不 能 提供 你 所 需 的 全 部 模块 。 除非 是 很 小 的 项 目 , 否则 你 
总 要 再 写 一 些 自己 的 模块 。 当 然 了 ， 框 架 也 会 提供 很 多 你 根本 用 不 到 的 模块 。 

如 果 你 确实 想 使 用 自己 熟悉 的 框架 , 我 建议 只 取 其 中 你 需要 的 那 一 部 分 , 用 不 到 的 部 分 丢 
掉 。 不 要 只 在 页 面 上 粘贴 一 个 bootstrap.css 文件 ， 而 是 把 你 需要 的 那些 模块 复制 到 你 自己 的 样 
式 表 里 ( 如 果 框 架 的 许可 协议 允许 这 样 做 的 话 )， 然 后 把 这 部 分 CSS 改造 成 你 自己 的 样式 。 

如 果 你 在 页 面 里 添加 一 个 CSS 框架 ， 放 在 自己 的 样式 表 前 面 ， 接 下 来 你 就 需要 写 一 大 堆 
样式 来 覆盖 和 补充 框架 样式 。 如 果 换 一 种 实现 方式 ， 把 框架 里 的 样式 放 到 自己 的 样式 表 里 ， 就 
可 以 直接 修改 样式 了 。 这 样 一 来 ， 页 面 里 的 CSS 会 更 精简 ， 也 更 容易 追踪 。 

不 要 育 目 地 使 用 框架 ， 要 学 习 思 考 框架 背后 的 设计 思路 。 想 象 一 下 ， 如 果 你 的 模式 库 要 设 
计 成 通用 适 配 的 , 让 不 知道 是 谁 的 第 三 方 使 用 , 要 怎么 做 。 这 可 以 让 你 写 的 样式 可 复 用 性 更 好 ， 
如 果 后 期 需要 修改 ， 可 以 减少 对 页 面 的 破坏 。 


通 津 来 计 ，CSS 是 一 门 “只 增 不 减 ” 的 语言 。 开 发 者 害怕 去 编辑 或 者 删除 那些 已 有 的 样式 ， 
因为 他 们 没 办 法 完全 预知 修改 造成 的 结果 。 这 时 他 们 束 会 深 加 更 多 的 代码 到 样式 表 的 底部 , 来 履 
兰 之 前 的 样式 规则 ， 或 者 增加 选择 如 优先 级 ， 最 终 导致 样式 表 变 成 了 一 蕉 难以 维护 的 乱码 。 

以 模块 化 的 方式 来 组 织 CSS 代码 ， 再 维护 一 僚 与 之 相应 的 模式 库 ， 就 可 以 避免 聊 人 这样 十 
钦 的 境地 。 你 总 是 知 近 茶 个 模块 的 样式 位 于 何 处 。 每 个 模块 只 用 来 做 一 件 事 。 同 时 ,模式 库 还 有 
助 于 开发 者 密切 监视 样式 表 开 发 过 程 中 的 进展 情况 。 














10.3 总结 


口 使 用 工具 来 存档 和 清点 模块 ， 比 如 KSS。 

口 使 用 模式 库 来 记录 HTML 标记 示例 、 模 块 变 体 和 模块 的 JavaScript。 
口 开发 模块 时 遵循 “CSS 优先 ”。 

口 考虑 好 CSS 定义 的 API， 之 后 不 要 轻易 修改 它 。 

口 使 用 语义 版 本 为 CSS 做 版 本 控制 。 

口 不 要 育 卓 地 添加 整个 CSS 框架 到 页 面 上 ， 只 取 自 己 需 要 的 那 部 分 。 











第 四 部 分 
高 级 话题 








设计 一 个 精致 的 UI 界面 非常 重要 。 用 户 更 倾 回 于 相信 一 个 看 起 来 很 专 
业 的 应 用 程序 。 如 果 网 站 设计 得 党 心 悦 日 ， 他 们 可 能 会 更 乐意 花 时 间 浏 览 。 
在 本 书 最 后 六 草 中 , 我 们 把 重点 放 在 设计 考量 上 。 一 些小 小 的 细节 ,可 能 会 
对 网 站 的 观感 产生 重大 的 影响 。 











育 景 、 阴 影 和 癌 合 模 陈 





本 草 概要 

口 线性 渐变 和 答 向 渐变 

口 盒 阴 影 和 文字 阴影 

D 调整 背景 图 片 的 大 小 和 位 置 

口 使 用 混合 模式 ， 让 背景 和 内 容 相 结合 








关于 CSS 我 们 已 经 讲 了 很 多 东西 。 你 已 经 对 CSS 的 基本 工作 方式 有 了 更 深入 的 理解 ， 学 会 
了 多 种 布局 方法 , 还 学 会 了 如 何 确保 代码 组 织 良 好 且 易 于 维护 。 这 些 内 容 涵盖 了 从 头 开始 建立 一 
个 网 站 所 需 的 基本 要 素 。 你 学 到 了 这 些 知识 ， 然 后 可 以 应 用 到 实际 项 目 中 ， 或 许 感觉 非常 不 错 ， 
但 是 这 还 不 够 ! 

一 个 网 站 ， 从 看 起 来 还 可 以 ， 到 看 起 来 非常 樟 ， 差 别 在 于 细节 。 在 实现 了 页 面 里 某 个 组 件 的 
布局 并 写 完 样式 之 后 ， 不 要 急 着 继续 ， 有 意识 地 训练 自己 ， 以 挑剔 的 眼光 审视 刚刚 完成 的 代码 。 
如 果 增 加 (或 者 减少 ) 一 点 内 边 距 是 不 是 看 起 来 更 好 ?调整 一 下 颜色 ， 稍 微 变 深 或 变 浅 ,或 者 
不 要 那么 鲜艳 ， 是 不 是 效果 更 好 一 点 ?如 果 你 正在 开发 设计 师 详 细 的 视觉 稿 , 那么 你 的 实现 效果 
是 否 尽 可 能 做 到 了 完美 还 原 ” 设计 师 可 是 花费 了 很 多 精力 推 殴 那 些 细节 的 , 一 定 要 认真 对 待 这 件 
事情 。 

要 实现 这 些 细节 ，CSS 中 那些 需要 艺术 创意 的 部 分 就 派 上 用 场 了 。 可 能 你 跟 大 部 分 开发 者 一 
样 ， 并 不 认为 自己 也 是 个 设计 师 或 者 艺术 家 ， 但 是 只 要 你 一 直 从 事 CSS 相关 的 工作 ， 总 是 需要 
扮演 其 中 某 个 角色 。 本 书 的 第 四 部 分 将 重点 关注 这 部 分 内 容 。 

最 后 这 几 章 都 是 关于 细节 工作 的 , 看 看 还 有 哪些 特别 的 东西 可 以 添加 到 页 面 上 。 我 会 教 你 一 
些 设计 上 的 小 技巧 , 不 要 担心 学 不 会 , 设计 并 不 是 你 想象 的 那么 主观 。 我 会 讲解 一 些 具体 的 规则 ， 
告诉 你 如 何 使 用 颜色 、 间距 、 排 版 和 动画 。 如 果 你 想 让 自己 的 网 站 不 仅 功 能 完备 , 而 且 外 观 精 美 ， 
那么 这 儿童 将 带 给 你 一 些 启发 。 

本 章 将 介绍 如 何 为 网 页 添加 视觉 效果 。 以 图 11-1 展示 的 按钮 为 例 ， 它 使 用 了 背景 渐变 和 投 
影 两 种 特效 , 看 上 去 有 T 了 了 立 体感。 背景 颜色 从 顶部 的 中 蓝 色 ( 帮 7b ) 过渡 到 底部 的 深蓝 色 (#148 )。 
你 可 能 没有 留意 到 这 层 渐变 , 但 是 再 加 上 底部 和 右 侧 边缘 的 阴影 效果 ,就 让 按钮 整体 呈现 出 了 立 
体感 。 
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图 11-1 添加 了 渐变 背景 和 投影 效 末 的 按钮 


本 草 接 下 来 会 讲解 渐变 和 投影 是 如 何 工 作 的 , 也 会 展示 一 些 实际 应 用 的 例子 。 还 有 一 种 非常 
有 意思 的 特效 叫 作 混 合 模 式 ( blend modes )， 可 以 把 多 个 背景 图 片 和 背景 闫 色 以 不 同方 式 组 合 在 
一 起 使 用 。 

一 般 不 太 需 要 同时 把 这 些 特效 添加 到 页 面 上 ,因此 我 们 不 会 建 一 个 大 网 页 ,而 是 拆 分 成 多 个 
小 例子 来 演示 。 学 会 了 这 些 特效 ， 你 就 可 以 有 选择 地 将 其 添加 到 各 种 项 目 里 了 。 


11.1 源 变 


前 面 的 董 市 已 经 介绍 了 纯色 背景 和 一 些 背 景 图 片 的 使 用 方法 ,但 是 backgroung 属性 依然 
还 有 很 多 的 功能 等 竺 我 们 去 探索 。 实 际 上 ， 它 是 以 下 八 个 属性 的 简写 。 
指定 一 个 文件 或 者 生成 的 颜色 渐变 作为 背景 图 片 。 
设置 育 景 图 片 的 初始 位 置 。 
[backoround- Size 指定 元 系 内 背景 图 片 的 演 染 尺寸 。 
口 packground-repeat 一 一 决定 在 需要 填充 整个 元 素 时 ， 是 否 平 铺 图 片 。 
男 background-origin- 决定 背景 相对 于 元 素 的 边框 盒 、 内 边 距 框 盒 (初始 值 ) 或 内 容 
盒子 来 定位 。 


background-clip 











UD background-image 





DD background-position 




















指定 背景 是 否 应 该 填充 边框 盒 ( 初始 值 )、 内 边 距 框 盒 或 内 容 盒子 。 
DD packground-attachment 一 一 指定 背景 图 片 是 随 着 元 系 上 下 深 动 (初始 值 )， 还 是 固定 
在 视 口 区 域 。 注 意 ， 使 用 fixea 值 会 对 页 面 性 能 产生 负面 影响 。 
回 packground-color 指定 纯色 背景 ， 泻 染 到 背景 图 片 下 方 。 
本 章 ， 我 们 会 学 习 这 些 属性 。 现 在 需要 了 解 的 是 ,使 用 简写 属性 (backgrouna ) 可 以 设置 指 
定 的 值 ， 同 时 把 其 他 属性 重 置 为 初始 值 。 因 此 ， 在 需要 用 到 多 个 属性 时 ， 我 往往 使 用 单独 的 属性 。 
background-image 属性 非常 有 意思 。 你 已 经 知道 这 个 属性 可 以 接受 一 个 图 片 URL 路 径 
(第 8 章 里 的 background-image: url (coffee-beans.Jjpg) )， 而 它 也 可 以 接受 一 个 渐变 了 沼 
数 。 例 如 ， 定 义 一 个 从 日 色 过 渡 到 蓝 色 的 渐变 ， 如 图 11-2 所 示 。 





























图 11-2 白色 到 蓝 色 的 线性 渐变 


244 第 11 章 背景 、 阴 影 和 混合 模式 





渐变 是 一 种 非常 有 用 的 特效 。 我 们 先 看 看 渐变 是 怎么 工作 的 ， 然 后 再 举 一 些 实际 例子 。 要 尝试 
渐变 , 先 创 建 一 个 新 页 面 和 样式 表 , 添加 代码 清单 11-1 中 的 CSS, 其 中 使 用 了 1inear-graqient () 
困 数 定义 渐变 。 
代码 清单 11-1 基础 线性 渐变 


.fade { 
height: 200px; 
width: 400px; | 
口 则 浅 亦 
background-image: linear-gradient (to right, white, blue); 同 右 侧 渐变 ， 从 日 色 
} 过 渡 到 蓝 色 


渐变 实际 上 就 是 背景 图 片 ,渐变 本 里 不 会 影响 元 条 的 大 小 。 为 了 演示 ,我 们 给 元 系 明 确 设 置 
了 宽 高 。 因 为 元 素 是 空 的 ， 所 以 必须 手动 设置 高 度 才 能 看 到 渐变 效果 。 

linear-gradient 国 数 使 用 三 个 参数 来 定义 行为 : 角度 、 起 始 颜色 和 终止 颜色 。 这 里 角度 
值 是 to right ,意思 是 渐变 从 元 系 的 左 侧 开始 ( 这 里 是 日 色 ), 平滑 过 渡 到 右 侧 ( 这 里 是 蓝 色 )。 
也 可 以 使 用 其 他 的 颜色 表示 法 ， 比如 hex (#0000ff ) RGB ( rgpb (0, 0, 255) ) 或 者 transparent 
关键 字 。 把 代码 清单 11-2 中 的 元 系 添 加 到 页 面 上 查看 渐变 效 朱 。 


代码 清单 11-2 带 背 景 渐变 的 元 素 

<div class="fade"></div> 

有 好 几 种 不 同 的 方式 来 指定 渐变 的 角度 。 在 本 例 中 ， 我 们 使 用 了 to right， 当 然 也 可 以 使 
用 to BOB 或 者 te. DOottos 甚至 可 以 指定 某 个 对 角 ， 比如 人 这 样 的 话 ， 渐 
变 会 从 元 系 的 左上 角 开 始 ， 逐 渐 过 渡 到 右 下 角 。 

我 们 可 以 使 用 更 确切 的 单位 ( 比如 度 )， 更 精确 地 控制 角度 。 值 0aeg 代表 垂直 向 上 ( 相当 
于 to top )， 更 大 的 值 会 沿 着 顺 时 针 变 化 ， 因 此 90deg 代表 问 右 渐变 ，180geg 代表 回 下 渐变 ， 
360deg 又 会 代表 同上 渐变 。 因 此 ， 代 码 清单 11-3 等 价 于 之 前 的 例子 。 


代码 清单 11-3 ”使 用 度 的 渐变 


.fade { 




















"0 200px; 9oaeg 相当 于 
width: 400px; to right 
background-image: linear-gradient (90deg, white, blue); 


} 

度 是 最 闸 用 的 单位 ， 还 有 一 些 其 他 单位 可 以 用 来 表示 角度 ， 如 下 所 示 。 

口 rad 一 一 着 度 (radian )。 一 个 完整 的 圆 是 2x， 大 概 是 6.2832 弧度 。 

口 turn 一 一 代表 环绕 圆周 的 圈 数 。 一 圈 相 当 于 360 度 ( 360deg )。 可 以 使 用 小 数 来 表示 不 
足 一 图， 比如 0.25turn 相当 于 90deg。 

giad 百 分 度 (gradian )。 一 个 完整 的 圆 是 400 百 分 度 (400grad )，100grad 相当 于 
90dego 

可 以 尝试 一 下 为 渐变 设置 不 同 的 值 ， 看 看 效果 如 何 。 
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11.1.1 使 用 多 个 颜色 市 点 


大 部 分 渐变 只 需要 两 个 颜色 ， 从 一 个 颜色 过 渡 到 男 一 个 。 也 可 以 定义 包含 多 个 颜色 的 渐变 ， 
其 中 每 个 颜色 可 以 称 为 一 个 颜色 节点 ( color stop )。 图 11-3 展示 了 包含 三 个 颜色 节点 的 渐变 ( 红 
色 、 和 白色 和 蓝 色 )。 

















图 11-3 包含 三 个 颜色 市 点 的 渐变 (红色 到 白色 再 到 蓝 色 ) 


为 1inear-gradient () 困 数 添加 更 多 的 颜色 ,就 可 以 搬入 多 个 颜色 节点 。 按 代码 清单 11-4 
更 新 样式 表 ， 然 后 在 页 面 上 查看 渐变 效果 。 


代码 清单 11-4 ”包含 多 个 闫 色 市 点 的 线性 淘 变 
.fade { 
height: 200px; 








指定 多 个 
width: 400px; 颜色 节点 
background-image: linear-gradient (90deg, red, white, blue); 3 ~ 


) 

一 个 渐变 可 以 接受 任意 数量 的 闫 色 市 点 , 市 点 之 间 通 过 去 吕 分 隔 。 产 变 会 日 动 均 习 地 平 铺 这 
些 颜色 市 点 。 在 本 例 中 ,最 左 侧 (0% ) 从 红色 开始 ,过 渡 到 中 间 〈50% ) 的 月 色 ， 到 最 右 侧 的 蓝 
色 (100% ) 我 们 也 可 以 在 渐变 函数 中 为 每 个 颜色 市 点 明确 指定 位 置 。 代 码 清单 11-4 中 的 渐变 等 
价 于 下 面 的 代码 : 


linear-gradient (90deg, red 0%, white 50%, blue 100%) 


从 这 个 例子 你 可 能 已 经 猪 到 了 ,颜色 市 点 的 位 置 可 以 调整 ,不 是 必须 均匀 分 布 。 除了 使 用 百 
分 比 来 定位 以 外 ， 还 可 以 使 用 像素 、em 或 者 其 他 长 度 单 位 。 


1. 条 纹 

如 果 在 同一 个 位 置 设 置 两 个 颜色 节点 , 那么 渐变 会 直接 从 一 个 颜色 变换 到 另 一 个 ,而 不 是 平 
滑 过 渡 。 图 11-4 展示 的 渐变 ， 从 红色 开始 ， 直 接 变换 到 了 白色 ， 然 后 又 变 成 了 蓝 色 ， 整 体 呈 现 
条 纹 状 。 
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图 11-4 通过 在 同一 位 置 放置 两 个 颜色 节点 的 渐变 ， 实 现 条 纹 效 果 
实现 该 渐变 的 具体 代码 如 代码 清单 11-5 所 示 ， 注 意 渐变 中 有 四 个 颜色 节点 ， 其 中 两 个 是 白色 。 
代码 清单 11-5 ”同一 个 位 置 放置 两 个 颜色 节点 ， 由 此 来 创建 条 纹 


.fade { 
height: 200px; 
width: 400px; 
background-image: linear-gradient (90deg, 











red 40%, white 40%, 相同 位 置 上 
white 60%， blue 60%); 的 颜色 节点 


} 

因为 第 一 个 颜色 市 点 是 红色 , 在 40% 的 位 置 , 所 以 渐变 从 左 侧 边 绿 一 直到 40% 是 纯 红 色 ; 
为 第 二 个 闫 色 节 点 是 白色 , 也 是 在 40% 的 位 置 , 所 以 渐变 在 这 里 直接 变 成 了 日 色 ; 接 下 来 因为 在 
60% 的 位 置 , 还 有 一 个 白色 的 颜色 节点 ,所 以 40% 到 60% 之 间 的 渐变 是 纯 白色 ; 最 后 一 个 颜色 节 
点 是 蓝 色 ， 也 是 在 60% 的 位 置 ， 这 样 丈 会 直接 变换 成 赣 色 ， 然 后 一 直到 右 侧 边缘 是 蓝 色 。 

2. 重复 渐变 

前 面 的 例子 虽然 只 是 为 了 演示 , 但 也 可 以 用 来 实现 一 些 有 意思 的 效果 , 特别 是 挫 配 另 一 个 稍 
微 有 点 不 同 的 渐变 函数 时 ， 这 个 丽 数 加 是 repeating-linear-gradient()。 此 羡 效 和 函数 
linear-gradient 的 效果 基本 相同 ， 唯 一 的 区 别 就 是 前 者 会 重复 。 这 最 终生 成 的 条 纹 类 似 于 理 
发 店 门口 的 旋转 招牌 ， 用 在 进度 条 上 效果 非常 棒 (如 图 11-5 所 示 )。 


村 
图 11-5 “使 用 重复 线性 渐变 的 条 纹 状 进 度 条 


对 于 重复 渐变 , 最 好 使 用 特定 的 长 度 而 不 是 百分比 , 因为 设置 的 值 决 定 了 要 重复 的 图 片 大 小 。 
按 代码 清单 11-6 所 示 的 条 纹 进度 条 的 代码 ， 更 新 样式 表 。 


代码 清单 11-6 ”创建 斜纹 进度 条 















































.faqe 1{ 
height: lem; 
width: 400px; 0 
backoround- mage: Topeatino linear gradlent (450e0; 闲 监 和 浅 监 色 
#57b, #57b 10px, #148 10px, #148 20px); 交替 生成 条 纹 


border-radius: 0.3em; 


} 
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有 时 ,把 一 个 半成品 的 代码 片段 改 成 自己 需要 的 样子 ， 比 从 头 开始 编码 实现 要 容易 一 些 。 我 
们 可 以 在 css-tricks 网 站 的 文章 Stripes in CSS 上 找到 更 多 的 例子 。 
11.1.2 ”使 用 径 向 渐变 


妨 一 类 渐变 是 径 四 渐变。 线性 渐变 是 从 元 素 的 一 痛 开 始 ， 沿 春 二 线 过 渡 到 邦 一 奖 ， 而 径 回 渐 
变 不 同 ， 它 是 从 一 个 点 开始 ， 全 方位 问 外 扩展 。 基 本 示例 如 图 11-6 所 示 。 





图 11-6 由 日 色 问 蓝 色 过 渡 的 径 癌 渐变 
按 代码 清单 11-7 中 所 示 的 径 向 渐变 代码 ， 编 辑 样式 表 。 


代码 清单 11-7 “基础 径 向 渐变 
.fade { 
ee 从 中 心 的 白色 过 渡 
| I 边缘 的 蓝 
radial-gradient (white, blue); 到 边缘 的 监 色 


background-image: 


} 

默认 情况 下 ,渐变 在 元 素 中 是 从 中 心 开始 , 平滑 过 渡 到 边缘 。 渐 变 整 体 呈 椭圆 形 ， 跟 随 元 素 
大 小 进行 变化 〈 也 就 是 说 ， 较 宽 的 元 系 ， 其 径 回 源 变 也 较 宽 ， 反 之 亦 然 )。 

跟 线 性 渐变 一 样 , 径 回 渐变 同样 文 持 颜色 节点 。 你 可 以 提供 多 个 节点 ， 使 用 百分比 或 者 长 度 
单位 指定 市 点 位 置 ,你 也 可 以 把 径 癌 渐变 设置 为 贺 形 而 非 椭圆 ,甚至 可 以 指定 渐变 中 心 点 的 位 置 。 
repeating-radial-gradient () 国 数 可 以 重复 生成 图 样 ， 形 成 同心 圆 环 。 

这 些 特性 大 部 分 可 以 通过 示例 解释 清楚 ， 图 11-7 列举 了 几 个 例子 以 及 相应 的 代码 。 建 议 你 
在 页 面 中 试 一 下 ， 或 者 尝试 修改 成 月 己 的 代码 。 

















radial-gradient (white, midnightblue) 


基础 渐变 〈 椭 圆 ) 


radial-gradient (circle, white, midnightblue) 


圆 形 渐变 


radial-gradient (3em at 25% 25%, white, midnightblue) 


大 小 为 3sm， 中 心 点 跑 离 左 侧 和 顶部 边缘 都 为 25% 


radial-gradient (circle, midnightblue 0%, white 75%, red 100%) 
指定 颜色 市 点 位 置 的 人 径 疝 渐变 


repeating-radial-gradient (circle, midnightblue 0, 
midnightblue lem, white lem, white 2em) 





图 11-7 人 径 癌 渐变 的 几 个 例子 


在 实际 开发 中 , 我 发 现 径 问 渐 变 很 少 需要 做 复杂 的 编码 ,基本 的 应 用 形式 已 经 可 以 满足 大 部 
分 需求 。 如 末 你 想 更 深入 地 人 研究 一 下 ， 可 以 参考 MDN 有 关 渐 变 的 相关 文档 。 

前 面 的 大 部 分 例子 使 用 了 对 照明 显 的 颜色 ,这 么 做 是 为 了 突出 效果 ,让 渐变 的 行为 清晰 明了 。 
不 过 在 实际 的 项 目 开 发 中 ， 要 尽量 少 用 差异 如 此 明显 的 渐变 颜色 。 

比如 不 要 使 用 从 白色 到 黑色 的 渐变 , 可 以 从 白色 渐变 到 浅 灰色 , 或 者 在 两 个 细微 差别 的 蓝 色 
之 间 渐 变 。 这 样 不 会 让 用 户 产 生 不 适 。 菏 些 情况 下 用 户 可 能 没有 意识 到 渐变 的 存在 , 但 这 些 渐变 
依然 为 页 面 营 造 了 细微 的 立体 感 。 后面 我 会 展示 一 些 关 于 渐变 的 实际 应 用 案例 , 但 在 那 之 前 ,我 
们 先 来 看 看 阴影 。 


11.2 ”| 阴影 


阴影 是 另 一 种 可 以 为 网 页 增加 立体 感 的 特效 。 有 两 个 属性 可 以 创建 阴影 ，box-shadow 可 以 
为 元 系 盒 子 生成 阴影 ，text-shadqow 可 以 为 泻 染 后 的 文字 生成 阴影 。 我 们 已 经 在 前 面 的 章节 使 
用 过 一 两 次 pox-shadow 了 ， 现 在 进一步 全 究 一 下 它 是 如 何 工作 的 。 

声明 pox-shadow: lem 1em black 生成 了 图 11-8 所 示 的 阴影 。 其 中 1em 代表 偏 移 量 ， 
即 阴影 从 元 系 的 位 置 侦 移 了 多 少 距离 〈 先 水 平方 向 ， 后 对 直方 加 )。 如 末 仿 移 量 都 设置 为 0， 那 
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么 阴影 会 下 接 演 染 在 元 条 下 方 。black 指明 了 阴影 的 颜色 。 


This is a box with a shadow | 


图 11-8 ”基本 的 盒 阴 影 


默认 情况 下 ， 阴 影 与 元 又 的 大 小 和 尺寸 相同 。 如 果 元 又 设置 了 border-radius， 那 么 阴影 相应 
地 也 会 有 圆 角 。 阴 影 的 水 平 偶 移 量 (x )、 垂 直 偶 移 量 (”) 和 颜色 都 不 可 或 缺 。 还 有 两 个 值 是 可 
选 的 : 模糊 半径 和 扩展 半径 。 完 整 的 语法 如 图 11-9 所 示 。 


模糊 半 众 颜色 














box-shadow: 2px 2px 2px lpx black; 
| 





水 平 偏 移 (x) 和 垂直 偏 移 (y) 扩展 半径 
图 11-9 盒 阴 影 设置 规则 
模糊 半径 用 来 控制 阴影 边缘 模糊 区 域 的 大 小 ,可 以 为 阴影 生成 一 个 更 柔和 、 有 点 透明 的 边缘 。 
扩展 半径 用 来 控制 阴影 的 大 小 ， 设 置 为 正 值 可 以 使 阴影 全 方位 变 大 ， 设 为 负 值 则 会 变 小 。 
11.2.1 使 用 渐变 和 阴影 形成 立体 感 


下 面 使 用 渐变 和 阴影 来 实现 图 11-10 所 示 的 按钮 ,由 上 至 下 的 渐变 可 以 使 按钮 产生 弧 形 的 3D 
效 朱 ， 阴 影 加 强 了 这 种 效 末 。 我 们 还 将 在 本 例 中 使 用 :active 伪 类 来 创建 男 一 种 阴影 效果 ， 供 


按钮 揭 下 的 时 候 使 用 。 


图 11-10 使 用 了 渐变 和 阴影 的 按钮 ( 左 ); 按钮 激活 〈 揭 下 ) 时 的 样式 〈 右 ) 


这 里 的 渐变 幅度 很 小 , 你 可 能 不 会 立即 注意 到 , 但 它 确 实 让 按钮 看 起 来 稍微 圆润 些 。 阴 影 做 
了 一 些 模糊 处 理 ， 看 起 来 更 自然 了 。 按钮 点 击 时 ， 移 除了 阴影 效 末 ,取而代之 的 是 在 按钮 的 边框 
内 出 现 了 内 了 阴影。 这样 按钮 就 有 了 一 种 被 扎 下 的 感觉 , 就 仿佛 用 户 真 的 在 网 页 上 按压 按钮 。 释 放 
鼠标 按键 后 ， 按 钮 又 恢复 了 最 初 的 效 末 ， 这 和 是 通过 使 用 按钮 的 :active 状态 实现 的 。 

为 按钮 新 建 一 个 网 页 和 样式 表 ， 将 代码 清单 11-8 添加 到 页 面 中 。 


代码 清单 11-8 按钮 的 标记 


<button class="button">Sign up now</button> 
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接 下 来 ， 添 加 代码 清单 11-9 中 的 样式 。 这 些 样式 会 覆盖 掉 用 户 代 理 样式 的 字号 和 边框 ， 同 
时 设置 了 按钮 大 小 ， 并 添加 了 谢 变 背景 和 盒 阴 影 。 


代码 清单 11-9 使 用 了 渐变 和 阴影 的 按钮 样式 
.button { 
padding: lem; 
border: 0; 
font-size: 0.8rem; 


Color: white; 从 浅 蓝 色 到 中 
border-radius: 0.5em; 蓝 色 的 渐变 
background-image: linear-gradient (to bottom, #57b, #148); 


带 0.5em 模糊 半径 
的 深蓝 色 阴影 


box-shadow: 0.1em 0.1em 0.5em #124; 
} 


.button:active { 





box-shadow: inset 0 0 0.5em #124, 两 个 内 部 
吕 
inset 0 0.5em lem rgba(0,0,0,0.4); | 盒 阴影 

I 小 

】 


background-image 属性 提供 了 两 个 相似 的 蓝 色 组 成 的 渐变 。 盒 阴影 偏 移 得 不 是 很 多 ， 只 
回 右 和 加 下 分 别 俩 移 了 0.1em; 模糊 效 采 也 比较 温和 ， 只 有 0.5em。 阴 影 偏 移 得 越 大 ， 就 显得 图 
片 从 网 页 上 被 “提起 ”得 越 高 ， 立 体感 越 强 。 激 活 状 态 下 ， 盒 阴影 效果 改变 了 。 

这 里 做 了 两 件 事 。 我 们 增加 了 一 个 inset 关键 字 ， 用 来 蔡 换 之 前 的 盒 阴 影 。 这 样 就 可 以 使 
阴影 出 现在 元 素 边框 的 内 部 ， 而 非 之 前 的 外 部 。 同 时 我 们 定义 了 不 止 一 个 阴影 ， 用 逗号 分 隔 。 通 
过 这 种 方式 可 以 添加 多 个 阴影 。 

第 一 个 内 阴影 (inset 0 0 0.5em #124 ) 偏 移 量 为 0， 轻微 模糊 。 这 在 元 素 的 边缘 内 添加 
了 一 个 阴影 环 。 第 二 个 内 阴影 (inset 0 0.5em lem rgba(0,0,0,0.4) ) 在 和 慌 直方 向 有 一 点 
偏 移 ， 这 样 就 让 按钮 顶端 的 阴影 延长 了 一 些 。RGBA 颜色 表示 法 定义 了 一 个 半 透 明 的 黑色 。 建议 
你 目 己 动手 修改 一 下 这 些 值 ， 看 看 它们 到 压 如 何 有 影响 最 终 的 泻 染 效 果 。 


说 明 在 Chrome 浏 览 器 中 点 击 按钮 时 ， 你 会 发 现 按 钮 周围 环绕 了 一 个 浅 蓝 色 的 光圈 ， 
这 是 浏览 器 为 按钮 的 :focus 状态 默认 添加 的 轮廓 线 。 可 以 通过 设置 .button:focus 
{ outline: none; } 来 移 除 轮 慷 线 。 建 议 你 在 移 除 轮 慷 线 的 同时 ,添加 一 些 其 他 特 
效 来 代替 ， 这 样 当 用 户 使 用 键盘 导航 的 时 候 ， 就 可 以 看 到 当前 焦点 状态 在 哪里 。 


把 屏 卉 上 的 元 系 设 计 得 如 同 真实 世界 的 实物 ( 称 为 拟 物化 设计 的 方法 )， 这 种 设计 方法 在 前 
几 年 广泛 使 用 。 在 真实 世界 中 ,物体 不 会 有 完美 的 纯色 。 即 使 是 光滑 的 表面 ， 受 各 种 角度 的 光线 
反射 的 影响 ， 也 会 产生 元 区 和 阴影 区 。 

为 按钮 添加 圆润 饱满 的 外 观 、 角 度 合 适 的 阴影 ， 就 可 以 使 其 看 起 来 像 一 个 真实 的 物件 。 其 他 
第 见 的 拟 物 化 设计 的 元 系 还 有 和 针织 边框 和 类 似 于 皮 盏 纹理 的 图 片 等 。2010 年 至 2013 年 间 ， 这 种 
设计 渐渐 被 局 平 化 设计 的 新 趋 荔 取代 了 。 
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11.2.2 ”使 用 局 平 化 设计 创建 元 素 


在 拟 物化 设计 追求 尽量 贴近 真实 世界 的 同时 ， 届 平 化 设计 选择 接受 现 人 社会 已 经 日 益 数 字 化 
的 事实 。 扁 平 化 设计 讲究 色彩 明快 统一 、 外 观 简洁 明了 ,这 就 意味 着 尽量 少 使 用 渐变 、 阴 影 和 圆 
角 。 但 比较 戏剧 性 的 是 ， 扁 平 化 设计 的 日 渐 兴 起 ， 反 而 是 在 这 些 和 干 呼 万 唤 才 出 台 的 CSS 特效 规 
范 之 后 (在 规范 出 台 之 前 ， 阴 影 和 渐变 效果 只 能 使 用 图 片 来 实现 )。 

扁平 化 设计 并 不 是 说 完全 不 用 这 些 特效 ， 用 还 是 要 用 的 , 但 要 用 得 巧 用 得 妙 。 例 如 ,前面 使 
用 的 渐变 是 从 浅 蓝 色 过 渡 到 中 蓝 色 , 我 们 现在 也 可 以 使 用 两 个 不 同 蓝 色 的 渐变 , 只 是 渐变 幅度 几 
乎 察觉 不 到 。 或 者 某 个 元 素 有 个 特别 小 的 阴影 ， 小 到 几乎 没有 。 

我 们 现在 以 遍 平 化 的 方式 重新 设计 一 下 按钮 。 新 的 按钮 样式 如 图 11-11 所 示 ， 现 在 看 起 来 不 
再 像 是 真实 世界 里 的 物件 了 ， 尽 管 按钮 下 方 还 是 有 一 道 淡淡 的 阴影 。 


图 11-11 扁平 化 外 观 的 按钮 


新 按钮 的 CSS 样式 如 代码 清单 11-10 所 示 ,， 其 中 也 包含 了 忌 标 悬 停 和 激活 状态 下 的 样式 。 按 
代码 清单 11-10 更 新 你 的 样式 表 。 


代码 清单 11-10 ”鼠标 悬 俘 和 激活 状态 的 扁平 化 按钮 
.button { 
padding: lem; 
border: 0; 


Oleor: Wille 纯色 背景 (没有 渐变 ) 
background-color: #57b; 


font-size: lrem; 

padding: 0.8em; 淡淡 的 阴影 
box-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.15); 

} 


.button:hover { 


background-color: #456ab6; 
] ee 


.button:active { 颜色 稍微 加 深 
background-color: #148; 
} 





























这 里 的 盒 阴 影 有 一 些 改变 , 只 有 开 耻 方 品 上 的 偏 移 ， 这样 就 只 有 问 下 的 阴影 ， 跟 之 前 看 上 去 
很 自然 的 阴影 角度 不 一 样 ; 同时 使 用 了 RGBA 颜色 表示 法 ， 其 中 红色 、 绿 色 和 蓝 色 的 值 都 是 0 
(生成 黑色 )，alpha 信 是 0.15( 几乎 完全 透明 )。 鼠 标 悬 停 和 激活 状态 的 外 观 也 是 书 平 化 的 ， 只 是 
把 背景 闫 色 变 成 了 暗 一 点 儿 的 蓝 色 。 同时 字号 也 增加 了 一 些 , 这 是 扁平 化 设计 兴起 以 来 的 另 一 种 
流行 趋势 。 
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11.2.3 ”让 按钮 看 起 来 更 时 尚 


时 至 今日 ， 局 平 化 设计 风格 依然 流行 ， 只 是 一 下 在 演化 。 通 用 的 设计 方案 是 介 于 局 平 化 设计 
与 拟 物化 设计 之 间 。 下 面 我 们 再 来 实现 一 下 图 11-12 所 示 的 按钮 。 这 次 的 设计 使 用 了 两 种 不 同 风 


格 的 设计 要 素 。 


图 11-12 为 一 种 类 型 的 届 平 化 按钮 ( 右 侧 展示 的 是 激活 状态 ) 


新 按 包 还 算是 简约 设计 ， 但 是 按钮 底部 有 个 厚 厚 的 边框 ， 这 让 按 乌 看 上 去 像 一 个 3D 立方 体 
的 前 侧 。 实 际 上 这 条 深 色 的 线 并 不 是 什么 porder， 而 是 不 加 模糊 效果 的 pox-shadow， 这 样 阴 
影 的 边 绿 可 以 生成 和 边框 加 角 相同 的 圆 孤 。 

激活 状态 时 ,按钮 回 下 方 移动 了 少量 像 系 的 距离 ， 看 上 去 就 像 按 钮 陶 进 了 页 面 里 ， 如 同 被 按 
下 去 一 样 。 按 代码 清单 11-11 更 新 样式 表 。 


代码 清单 11-11 ”当下 流行 的 按钮 样式 























.BIEESn 4 改 回 了 圆 角 效果 
padding: 0.8em; 
border: 0;，; 
ee 按钮 下 方 添加 了 阴影 
olor: white; 匣 料 六 
/ ( wrHzx ) 
border-radius: 0.5em; < 一 无 模糊 效果 


background-color: #57b; 
box-shadow: 0 0.4em #148; 





text-shadow: lpx lpx #148; 洪 加 了 细小 的 
) 文本 阴影 
.button:active { 占 击 时 , 按钮 
background-color: #456ab5; 人 
transform: translateY(0.1em).; 下 移 
box-shadow: 0 0.3em #148; 减 小 了 阴影 的 大 小 ， 用 来 
: 抵消 按钮 的 位 移 


这 里 的 按钮 以 一 种 不 同 的 方式 使 用 pox-shadow, 不 是 释 加 一 个 模糊 效果 的 阴影 , 而 是 保持 
明 影 边 绿 清晰 。 这 样 看 起 来 就 像 一 个 厚 厚 的 底部 边框 , 但 是 跟 丰 正 的 边框 还 是 有 一 些 区 别 的 ， 
为 它 的 圆 角 的 弧度 可 以 完美 贴 合 元 素 的 边框 圆 角 。 

这 里 的 文字 也 谎 加 了 阴影 效 末 。 文 本 阴影 跟 盒 阴影 很 像 ,不同 的 地 方 就 是 只 有 泻 染 后 的 文字 
有 阴影 ， 而 不 是 整个 元 素 盒 于。 文本 阴影 的 场 法 也 基本 上 完全 一 样 : 水 平 俩 移 量 、 垂 征 伍 移 量 、 
模糊 半径 ( 可 选 ) 和 颜色 。 但 文本 阴影 不 支持 inset 关键 字 和 扩展 半径 值 。 在 这 里 ， 我 们 为 文 
本 添加 了 一 个 深蓝 色 的 阴影 ， 每 个 方 回 各 但 移 了 1px。 

激活 状态 下 ， 我 们 也 做 了 一 些 新 的 事情 。 我 们 使 用 了 transform 属性 以 及 translateY() 
国 数 ， 使 元 兹 在 屏幕 上 下 移 了 0.lem (第 15 草 讲 到 transform 时 会 深入 讲解 具体 用 法 )。 然 后 我 们 
把 盒 阴 影 的 垂直 偏 移 量 减少 了 同样 的 距离 (从 0.4em 变 为 0.3em )。 这 样 一 来 , 揭 下 按钮 时 ,按钮 
































移动 ， 但 盒 阴 影 不 会 动 。 你 可 以 点 击 按钮 查看 效果 。 

渐变 和 阴影 可 以 以 各 种 各 样 的 方式 组 合 使 用 。 随 春 时 间 的 推移 ， 又 会 有 新 的 设计 流行 起 来 。 
我 们 要 做 的 是 , 在 看 到 菏 个 网 站 上 的 新 设计 时 , 停 下 来 伦 些 时 间 , 用 浏览 齿 的 开发 者 工具 检查 一 
下 ， 看 看 这 是 如 何 实 现 的 。 不 要 觉得 麻烦 蛾 ， 见 多 才能 识 三 。 








11.3 ”混合 模式 

大 部 分 情况 下 , 不 论 是 使 用 真正 的 图 片 还 是 渐变 ,元素 一 般 只 会 使 用 一 张 背 景 图 片 。 但 某 些 
情况 下 你 可 能 想 要 使 用 两 张 或 者 更 多 的 背景 图 片 ，CSS 是 文 持 这 么 做 的 。 

background-image 属性 可 以 接受 任意 数量 的 值 ， 相互 之 间 以 逗 喜 分隔 ， 如 下 所 示 。 

background-image: url(bear.jpg), linear-gradient (to bottom, #57b, #148); 

使 用 多 个 背景 图 片 时 ， 列 表 中 排 在 前 面 的 图 片 会 泻 染 到 排序 徘 后 的 图 片上 面 。 在 本 例 中 ， 
bear.jpg 会 遮盖 在 线性 渐变 之 上 上， 渐变 就 会 不 可 见 。 而 如 果 我 们 使 用 两 张 背景 图 片 ， 那 么 一 般 是 
希望 第 二 张 图 片 也 可 以 透视 显示 。 这 时 就 可 以 使 用 混合 模式 (blend mode )。 

如 末 丈 悉 网 片 编辑 软件 , 那 你 可 能 见 过 混合 模式 。 混合 模式 用 来 控制 车 放 的 图 片 走样 融合 在 
一 起 ， 有 些 模式 的 命名 有 点 让 人 摸 不 着 头脑 ， 比 如 滤 色 (screen )、 颜 色 加 次 ( color-burn )、 强 弛 
(hard-light ) 等 。 图 11-13 中 演示 的 例子 ， 是 两 张 背 景 图 片 以 正 刻 莅 底 (multiply ) 混合 模式 组 合 
生成 的 。 两 个 背景 使 用 了 同一 张 图 片 ， 但 是 背景 位 置 不 同 。 





























图 11-13 两 张 背景 图 片 以 正片 三 底 的 方式 组 合 在 一 起 
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最 终 呈 现 的 效 采 很 有 意思 ， ee ail 副本 虽然 合 放 在 一 起 , 但 都 清晰 可 见 。 而 且 混 合 模式 
不 会 冲淡 或 者 削弱 整体 的 颜色 ， 这 跟 普 通 的 调整 透明 度 的 做 法 还 不 一 样 。 


说 明 ”如果 一 张 背 景 图 片 有 一 些 透 明度 ， 即 使 不 使 用 混合 模式 ， 在 它 下 方 的 其 他 背景 
也 会 通过 透明 区 域 显 现 出 来 。 你 可 以 用 一 张 透 明 的 png 或 者 gif 图 片 试 一 下 ， 或 者 使 用 
渐变 ， 但 是 把 transparent 关键 字 设 置 为 其 中 一 个 颜色 节点 。 


下 面 我 们 创建 一 个 元 素 ， 使 用 两 个 背景 并 混合 成 图 11-13 所 示 的 样子 。 新 建 一 个 页 面 ， 添 加 
代码 清单 11-12 所 示 的 元 素 。 后 面 的 几 个 示例 中 会 重复 用 到 这 个 元 素 标记 。 


代码 清单 11-12 ”混合 背景 的 div 

<div class="blend"></div> 

接 下 来 我 们 就 用 一 个 空 元 素来 生成 想 要 的 效果 。 添 加 代码 清单 11-13 中 的 代码 到 样式 表 ， 并 
把 样式 表 链 接 到 页 面 。 


代码 清单 11-13 ”混合 两 张 背 景 图 搬 





















































.blend { 四 使 用 过 号 隔 开 的 
min-height: 400px; 两 张 背 景 图 片 
background-image: url(images/bear.Jp9g), url (images/bear.jJpg); 
background-size: cover; 
background-repeat: no-repeat; Ne 应 用 到 
background-position: -30vw, 30vw; 两 张 背景 图 片上 
background-blend-mode: multiply; 

} 为 每 张 背 景 图 片 设 置 

应 用 混合 模式 不 同 的 初始 位 置 








大 部 分 背景 相关 的 属性 可 以 接受 多 个 值 ， 以 去 扎 分隔 。backgroundq-position 就 使 用 了 
两 个 值 ， 第 一 个 值 会 应 用 到 第 一 张 育 录 图 片上 ， 第 二 个 值 会 应 用 到 第 二 张 背 景 图 片上 。 
background-size 和 background-repeat 属性 也 可 以 接受 多 个 值 ， 但 如 果 只 设置 一 个 值 ， 就 
会 应 用 到 所 有 的 背景 图 片上 。 这 里 使 用 了 min-neight 属性 ， 是 为 了 确保 元 素 不 会 显示 成 高 度 
为 0( 因 为 是 空 元 系 )。 

background-— size 属 性 接受 了 两 个 特殊 的 关键 字 值 ， 分 别 是 cover 和 contain。 俩 用 COVEr 
值 可 以 调整 背景 图 片 的 大 小 , 使 其 填 满 整个 元 杂 , 这 样 会 导致 图 片 的 边缘 被 裁 切 掉 一 部 分 ; 使 用 

ee 上 可 见 ， 尽 管 这 可 i A ey 



































i 查看 它们 有 哪些 不 同 效果 ， 比 如 color-burn 号 difference。 
这 很 有 趣 ， 但 你 可 能 会 疑惑 这 些 混 合 模式 到 底 有 什么 实用 性 。 这 里 列举 一 些 实际 应 用 : 

















(QD letterboxing 是 一 种 屏幕 宽 高 比 显示 方式 ， 指 的 是 16 : 9 的 图 像 要 显示 在 4 : 3 的 设备 上 ， 为 了 保留 画面 完整 性 ， 
图 像 与 设备 同 宽 ， 在 上 下 添加 黑 边 的 显示 模式 。 一 一 译 者 注 





口 使 用 某 种 颜色 或 者 渐变 为 图 片 着 色 ; 
口 为 图 片 添 加 纹理 效果 ， 比 如 划 痕 或 者 老 胶 片 放 映 时 的 颗粒 感 等 ; 
口 缓和 、 加 深 或 者 减 小 图 片 的 对 比 度 ， 使 图 片上 的 文字 更 具 可 读 性 ; 
口 在 图 片上 履 盖 了 一 条 文字 横幅 ， 但 是 还 想 让 图 片 完 整 显 示 。 
下 面 我 们 先 来 看 看 这 些 应 用 的 实例 , 然后 再 通过 一 个 明细 列表 简要 介绍 所 有 可 用 的 混合 模式 。 


11.3.1 为 图 片 着 色 


通过 使 用 混合 模式 , 我 们 可 以 把 一 张 全 彩色 图 片 着 色 成 单一 色相 的 图 片 。 下面 演示 一 下 把 大 
能 图 片 泻 染 成 蓝 色 ， 如 图 11-14 所 示 。( 注意 ， 如 来 你 是 在 纸 质 图 书 上 阅读 这 部 分 内 容 ， 图 片 可 
能 不 是 彩印 。 可 以 通 过 本 书 电子 版 或 者 在 浏览 器 中 运行 一 下 下 示例 来 查看 完整 效果 。) 




















图 11-14 ”使 用 单一 蓝 色 色相 着 色 的 照片 


background-blend-mode 不 仅仅 合并 多 个 背景 图 片 ， 还 会 合并 Backoqround-CoLoOrs 所 
有 这 些 合 放 的 图 层 , 最 终 都 会 被 混合 模式 拼合 在 一 起 , 因此 我 们 可 以 把 背景 颜色 设置 为 想 要 的 色 
相 ， 混 合 到 图 片 中 去 。 按 代码 清单 11-14 更 新 CSS 代码 。 


代码 清单 11-14 ”将 背景 闫 色 的 色相 混合 到 背景 图 片上 
.blend { 
min-height: 400px; 
background-image: url("images/bear.jpg"); 加 蓝 色 背景 色 
background-color: #148; 
background-size: cover; 
background-repeat: no-repeat.; 


background-position: center; 使 用 明度 混合 术 





图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com，) 专 享 尊重 版 权 
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background-blend-mode: luminosity; 





} 

明度 混合 模式 将 前 景 层 (大熊 图 片 ) 的 明度 , 与 背景 层 ( 蓝 色 背 景色 图 层 ) 的 色相 和 饱和 度 
混合 。 也 就 是 说 ， 最 终 是 完全 使 用 背景 色 图 层 的 颜色 ， 但 是 明暗 程度 来 自 大 能 图 片 。 

一 定 要 知道 ， 明 度 混合 模式 (还 有 其 他 几 种 类 似 的 混合 模式 ) 最 终 的 泻 染 结果 ， 取 决 于 哪个 
图 层 在 其 他 图 层 之 上 ,这 是 非常 重要 的 。 背 景色 图 层 始终 在 最 下 层 ， 其 他 背景 图 片 琶 放 在 背景 
图 导 之 下; 

如 果 我 们 把 一 个 蓝 色 的 图 层 放 在 大 能 图 层 上 面 而 不 是 下 面 (使 用 渐变 色 来 代替 背景 颜色 )， 最 终 
的 泻 染 结果 就 会 不 同 。 在 这 种 情况 下 ， 为 了 达到 同样 的 效果 ， 就 需要 使 用 颜色 混合 模式 ( 颜色 混合 
模式 与 明度 混合 模式 恰好 相反 ， 使 用 前 景色 的 色相 和 饱和 度 与 背景 色 的 明度 来 生成 最 终 的 结果 色 )。 
11.3.2 ”理解 混合 模式 的 类 型 

CSS 支持 15 种 混合 模式 ， 每 一 种 都 使 用 不 同 的 计算 原理 来 控制 生成 最 终 的 混合 结果 。 对 每 
一 个 像素 来 说 ,就 是 取 一 个 图 层 上 的 像素 颜色 , 与 其 他 图 层 上 对 应 像素 的 颜色 拼合 计算 ,生成 一 
个 新 的 像素 颜色 ， 最 终生 成 一 张 混合 图 片 。 

表 11-1 列 出 了 所 有 的 混合 模式 。 这 些 混 合 模式 又 可 以 划分 为 五 类 : 变 暗 、 变 亮 、 对 比 、 复 
合 和 比较 .有 的 模式 在 实际 应 用 中 可 能 更 有 用 一 点 ,需要 反复 的 试验 才能 选 出 最 合适 的 混合 模式 。 

表 11-1 把 混合 模式 分 成 五 个 大 类 














































































































效果 分 类 混合 模式 描 述 

变 暗 multiply 前 景色 越 亮 ， 背 景色 显示 出 来 的 越 多 
darken 选择 两 个 颜色 中 较 暗 的 那个 
color-burn 加 深 背 景色 ， 增 加 对 比 度 

变 亮 screen 前 景色 越 暗 ， 背 景色 显示 出 来 的 越 多 
lighten 选择 两 个 颜色 中 较 亮 的 那个 
color-dodge 加 亮 背景 色 ， 降 低 对 比 度 

对 比 overlay 对 暗色 使 用 multiply， 对 亮色 使 用 screen， 以 增加 对 比 度 ， 对 比 效 果 较 柔和 
nard- li9ht 大 幅 增 加 对 比 度 ， 有 点 像 全 加 ,但 是 使 用 加 强 版 的 multiply 或 者 screen， 对比 

效果 明显 

SOTE- 1 有 点 类 似 于 hard-light, 但 是 使 用 burn/dodge 来 代 禁 multiply/screen 

复合 Hue 将 上 层 颜 色 的 色相 混合 到 下 层 颜色 上 


saturation 将 上 层 颜色 的 饱和 度 混合 到 下 层 颜 色 上 
luminosity 将 上 层 颜色 的 明度 混合 到 下 层 颜色 上 








color 将 上 层 颜 色 的 色相 和 饱和 度 混 合 到 下 层 颜 色 上 
比较 difference 从 亮色 中 减 去 暗色 


exclusLon 类 似 于 aifference， 但 对 比 度 稍 弱 
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编写 本 书 时 ,大 部 分 主要 浏览 各 已 经 文 持 多 数 混 合 模 式 了 ， 当 然 E 和 Edge 浏 览 磊 是 个 例外 。 
Safari 浏 览 屁 也 不 支持 复合 效果 混合 模式 “， 必 要 的 时 候 可 以 使 用 特性 查询 并 提供 回 退 处 理 ( 参 
见 6.5 节 ), 可 以 在 CanI1Use 网 站 中 检索 CSS background-blend-mode 查 看 最 新 的 浏览 器 支持 情况 。 





11.3.3 “为 图 所 沫 加 纹理 


混合 模式 的 另 一 个 应 用 场景 就 是 为 图 片 添 加 纹理 效果 。 比如 你 有 一 张 富 有 现代 气息 的 清晰 图 
片 , 但 有 时 候 出 于 样式 考虑 ,你 想 让 图 片 与 众 不 同 。 这 时 候 就 可 以 使 用 灰 度 图 为 图 片 手动 添加 胶 
片 噪点 效果 或 者 其 他 纹理 。 

观察 图 11-15 展示 的 图 片 。 这 张 图 片 跟 前 面 使 用 的 大 能 图 片 一 样 ,但 是 混合 了 一 张 纹理 图 片 
以 后 ， 就 呈现 出 类 似 于 粗 制 帆布 的 效果 。 这 种 类 型 的 效果 可 以 通过 对 比 混合 模式 overlay、 
hard-light 或 soft-light 来 实现 。 这 个 例子 中 ， 我 们 不 希望 更 改 图 片 的 色相 ， 因 此 使 用 一 
张 灰 度 图 片 来 提供 纹理 ， 这 样 就 保留 了 原始 颜色 。 
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图 11-15 混合 了 纹理 的 图 片 


实现 纹理 合 加 的 代码 如 代码 清单 11-15 所 示 。 纹 理 图 族 以 重复 平 铺 的 方式 履 关 在 大 能 图 片上 
方 。 按 代码 清单 11-15 更 新 样式 表 ， 并 在 训 览 融 中 碍 看 效果 。 





J Safari 浏览 锅 从 10.1 版 本 已 经 开始 支持 复合 效果 的 混合 模式 。 一 一 译 者 注 
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代码 清单 11-15 ”使 用 soft -light 混合 模式 为 图 片 添加 纹理 














blend 1 将 纹理 图 片 覆 盖 
人 ， :3 3 
min-height: 400px; 在 主 图 片 之 上 
background-image: url("images/scratches.png"), url("images/bear.Jpg"); 
background-size: 200px, Cover; : 

每 200px 平 铺 
background-repeat: repeat, no-repeat.; 一 张 纹理 图 片 
background-position: center center:; 
background-blend-mode: soft-light; 使 用 柔 光 

} 混合 模式 





纹理 图 片 (图 11-16 ) 的 背景 大 小 设置 为 200px， 同 时 允许 背景 图 片 重复 ， 这 样 就 可 以 使 纹 
理 图 片 平 铺 填 满 整个 元 素 。 同 时 ， 第 二 张 图 片 的 背景 大 小 设置 为 cover， 且 不 允许 重复 ， 这 样 就 
不 会 平 铺 。 








图 11-16 ” 灰 度 模式 的 帆布 纹理 图 片 
我 发 现 soft-1ight 模式 对 于 暗色 系 纹理 图 片 效果 很 好 , 而 harda-1ight 和 overlay 模式 








更 适用 于 腕 色 的 纹理 图 片 〈《 如 和 东 纹 理 图 片 放 在 主 图 片 下 面 则 恰好 相反 ) 然而 实际 应 用 效果 可 能 
差别 很 大 ， 这 取决 于 你 的 设计 需要 和 基础 图 片 的 暗色 程度 。 


11.3.4 ”使 用 融合 混合 模式 


虽然 background-blend-mode 属性 可 以 实现 多 张 图 片 的 混合 ， 但 只 能 局 限于 元 又 的 背景 
颜色 或 者 背景 图 片 使 用 。 还 有 一 个 属性 mix-pblend-mode， 可 以 融合 多 个 元 素 。 这 样 不 仪 可 以 
混合 图 片 , 还 可 以 把 元 素 的 文本 和 边框 与 容 需 的 背景 图 片 混合 在 一 起 。 使 用 融合 混合 模式 ， 可 以 
把 标题 显示 在 图 片上 方 ， 但 遮 住 的 图 片 部 分 依然 可 以 显示 出 来 ， 如 图 11-17 所 示 。 




















11.3 混合 模式 259 





I 
图 11-17 标题 和 下 面 的 图 片 混合 在 一 起 
融合 后 的 效果 很 有 意思 , 文字 看 上 去 是 透明 的 ， 就 像 红色 棋 幅 通栏 被 剪 掉 了 一 部 分 。 这 里 我 














们 使 用 了 hara- light 混合 模式 和 中 灰色 文字 颜色 。 对 比 混合 模式 在 使 用 很 亮 或 很 暗 的 颜色 时 
才 会 有 更 好 的 效果 ， 这 里 的 文字 我 们 使 用 了 中 灰色 〈#808080 )， 背 景 图 层 显 示 出 来 之 后 没有 太 
大 变化 。 

首先 我 们 需要 把 标题 添加 到 标记 里 ， 然 后 作为 子 元 素 添加 到 容器 中 。 按 代码 清单 11-16 更 新 
代码 。 


代码 清单 11-16 添加 标题 到 容 右 中 


<div class="blend"> 
<hli>Ursa Major</hi1> 
</div> 


为 <n1> 增 加 样式 ， 最 终 效 琳 为 红色 的 纯色 背景 通栏 、 腕 灰色 顶部 和 底部 党 边框 、 灰 色 文 字 。 
然后 应 用 融合 混合 模式 ， 整 个 元 素 被 视 为 一 个 图 屋 ,， 和 下 面 的 容 侣 里 的 背景 图 片 混合 在 一 起 。 将 
代码 清单 11-17 更 新 到 样式 表 中 。 


代码 清单 11-17 ”使 用 融合 混合 模式 来 混合 多 个 元 素 


.blend { 
background-image: url("images/bear.jpg");} 








background-size: cover; 
background-position: center; 
padding: 5em 0 l0em; 

} 


.blend > hi { 
margin: 0; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 6rem; 
text-align: center; 使 用 强 光 
mix-blend-mode: hard-light; 瘟 合 模式 
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background-color: #c33; 


COolor: #808080; a 
, 为 前 景 元 素 设置 文 


border: 0.1lem solid #ccc; 2 
字条 页 
border-width: 0.1em 0; 字 和 背景 闫 色 


} 


这 里 的 标题 文字 没有 很 强 的 对 比 效 果 , 因此 操作 起 来 要 小 心 。 我 们 设置 了 大 字号 和 粗 体 ,这 
样 在 对 比 不 太 强 的 育 景 图 片上 ,文字 依然 清晰 易 谈 。 在 本 例 中 ,标题 加 是 被 置 于 网 族 中 对 比 度 较 
小 的 深 色 区 域 。 

混合 模式 在 设计 中 有 很 多 有 趣 的 用 法 。 使 用 混合 模式 ,结合 渐变 和 阴影 ， 可 以 为 页 面 洪 加 很 
多 有 意思 的 视觉 效果 。 但 是 凡事 部 有 两 面 ， 请 合理 使 用 ! 





11.4 ” 总 结 


口 使 用 渐变 和 阴影 为 页 面 增加 立体 效果 。 

口 基本 的 局 平 化 设计 也 可 以 少量 应 用 阴影 和 渐变 。 

口 带 有 明确 颜色 节点 的 渐变 ， 可 以 为 元 系 添加 条 纹 效 果 。 
口 小 马 的 背景 汤 变 比 纯色 背景 更 能 提升 设计 效 末 。 

口 使 用 混合 模式 可 以 为 图 片 着 色 或 者 洪 加 纹理 效果 。 

















对 比 、 闫 色 和 旧 距 





本 章 概 要 

口 把 设计 师 的 视觉 稳 转化 为 HTML 和 CSS 

口 使 用 对 比 设计 ， 把 用 户 的 注意 力 吸引 到 正确 的 页 面部 分 
口 颜色 的 选用 

口 充分 利用 空白 间距 

口 使 用 行 高 





使 用 CSS 实现 设计 师 提 供 的 视觉 稿 ， 是 Web 开发 中 很 重要 的 一 个 环节 。 我 们 做 这 部 分 工作 
时 ， 实 际 上 是 把 艺术 转化 为 代码 。 这 种 转化 过 程 ， 有 时 简单 明了 ， 但 有 时 就 需要 跟 设 计 师 协商 ， 
采取 折 中 方案 。 设 计 师 对 视觉 稿 做 的 每 一 次 小 改动 ， 我 们 都 需要 考虑 如 何 组 织 CSS 代码 使 其 更 
容易 复 用 。 相 较 于 单 页面 的 视觉 稳 ， 我 们 的 CSS 代码 应 该 更 具 通 用 性 。 

转化 工作 完成 之 后 ,任务 到 了 你 身上 ， 作 为 开发 者 ， 你 需要 基于 设计 师 的 构想 ， 继 续 开发 网 
站 。 你 至 少 应 该 有 一 些 设计 师 的 基本 思维 ,从 设计 师 的 角度 去 思考 间距 、 颜 色 和 排版 等 ,这 很 重 
要 。 你 需要 了 解 如 何 确 保 最 终 实现 的 效果 是 准确 的 。 如 果 你 认可 设计 师 的 目标 , 那 整个 过 程 就 会 
比较 顺利 。 

当然 了 , 你 可 能 并 非 总 是 和 设计 师 一 起 工作 。 如 果 是 在 一 个 小 型 创业 公司 或 者 个 人 项 目 中 工 
作 , 那 你 只 能 靠 自 己 。 不 管 那 种 情况 ,掌握 一 些 基 本 的 设计 原则 是 很 有 用 的 ， 这 样 你 就 可 以 自己 

本 章 将 介绍 如 何 像 设 计 师 一 样 思 考 ， 完 成 页 面 视觉 稿 ,并 将 其 转化 为 代码 。 本 章 将 重点 关注 
间距 和 颜色 ， 还 将 强调 一 些 设计 师 可 能 会 考虑 的 因素 。 目 标 是 在 你 学 了 这 部 分 内 容 后 ， 可 以 一 定 
程度 上 将 其 应 用 到 实际 项 目 设 计 中 , 甚至 不 需要 设计 师 参 与 也 能 进行 项 目 工作 。 为 了 达到 这 一 目 
的 ， 我 们 来 构建 图 12-1 所 示 的 页 面 。 















































262 第 12 章 对比、 颜色 和 间距 


ricin Support 
“和 


Team collaboration done right 


Get started 





Work together, even if you're apart Take it with you Priced right 

Organize your team conversations into Ink is available on a wide array of Whether you work on a team of three or 
threads. Collaborate together on devices, so you can work from anywhere: a three hundred, youllfind our tiered 
documents in real-time. Use face-to-face pricing reasonable at every level. 

video calls when typing just won't do. Web iOS Android Windows Phone 


图 12-1 为 Ink 协作 软件 设计 的 网 页 


图 12-1 显示 的 是 最 终 完 成 的 页 面 效 末 。 如 采 你 最 开始 从 设计 师 那 里 拿 到 设计 称 ， 那 么 可 能 
还 会 沉 有 很 多 附加 信息 。 后 面 你 会 看 到 这 些 附加 信息 ,但 首先 我 要 指出 设计 中 的 一 些 要 系 。 


12.1 ”对比 最 重要 


当 你 看 到 图 12-1 所 示 的 截图 时 ,注意 你 的 视线 落 在 哪里 ,大 概率 是 被 “Team collaboration done 
right” 这 人 句 广 告 培 和 它 下 面 的 “Get started” 按 钮 吸引 了 。 你 也 会 看 到 页 面 上 的 一 些 别 的 东西 ( 左 
上 角 的 公司 名 称 、 右 上 角 的 导航 菜单 、 下 面 的 三 个 栏目 ), 但 是 图 片 中 间 的 内 容 最 有 吸引 力 。 原 
就 在 于 对 比 (contrast )。 

对 比 是 设计 中 的 一 种 手段 , 通过 突出 某 物 来 达到 吸引 注意 力 的 目的 。 我 们 的 眼睛 和 思维 和 天生 
对 模式 比较 敏感 ， 一 旦 某 种 东西 破坏 了 模式 的 整体 效果 ， 我 们 就 自然 而 然 地 注意 到 了 它 。 

大 要 起 到 对 比 的 效果 ,页面 必 须 先 建 立 模式 , 就 如 同 必 须 先 有 了 规矩 才能 打破 规矩 。 在 图 12-1 
中 ， 导 航 按钮 之 间 的 间距 一 致 ， 这 三 栏 的 大 小 和 间距 也 一 样 。 另 外 ,三 个 “Read more” 按 钮 完 
全 相同 。 页 面 上 还 有 一 些 不 太一 样 的 颜色 ,但 都 是 同样 的 绿色 调 ， 只 是 明暗 程度 不 同 。 这 也 是 模 
块 化 CSS 和 模式 库 如 此 重要 的 一 个 原因 (参见 第 9 音 和 第 10 章 ),， 不 是 使 用 骸 套 的 选择 带 创建 
一 个 “板块 中 的 按钮 "， 而 是 创建 一 个 可 在 任意 地 方 使 用 的 按钮 。 

推进 样式 代码 复 用 ， 就 可 以 确保 网 站 中 使 用 一 致 的 模式 。 建 立 统一 的 模式 ， 然 后 打破 模式 ， 
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突出 网 页 上 最 重要 的 部 分 ， 这 是 专业 设计 师 的 一 个 核心 思路 。 

使 用 不 同 的 颜色 、 间 距 和 大 小 是 建立 对 比 的 一 些 篆 用 方法 。 如 有 果 好 儿 个 条 目 是 亮色 的 ,还 有 
一 个 是 暗色 的 , 那 你 就 会 首先 注意 到 这 个 上 暗色 条 上 日 。 如 采 一 个 条 日 周围 有 很 多 无 用 的 间距 ( 称 作 
留 白 )， 那 这 个 条 目 就 会 比较 突出 。 同 样 ， 较 大 的 元 系 也 会 从 一 系列 较 小 元 素 中 脱 蜂 而 出。 为 了 
实现 更 强 的 对 比 效 果 ，, 还 可 以 多 种 方法 组 合 使 用 ， 就 像 团 队 协 作 软 件 网 站 里 的 标 霹 那样 , 它 的 字 
写 较 大 、 周 围 留 得， 还 跟 者 一 个 醒目 的 深 色 按钮 。 

显然 ,标语 部 分 并 不 是 页 面 上 唯一 使 用 对 比 的 地 方 。 你 会 发 现 , 通过 对 比 , 信息 的 重要 程度 
和 传递 效果 都 有 了 层次 感 。 除了 标语 和 开始 按钮 , 导航 沫 单 (图 12-2 ) 和 页 面 压 部 的 每 个 板块 (图 
12-3 ) 明显 也 用 了 了 对比。 虽然 这 些 元 系 的 对 比 程度 不 如 标语 部 分 那么 强烈 ,但 在 各 日 的 区 域内 部 
也 部 有 吸引 注意 力 的 地 方 。 因 为 页 脚 是 整个 页 面 里 相对 不 太 重 要 的 内 容 ， 所 以 设计 得 很 小 , 也 没 
什么 对 比 。 
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图 12-2 ”亮色 的 登录 按钮 比 其 他 三 个 座 绿色 按钮 更 吸引 注意 力 


Work together, even if you're apart 


Organize your team conversations into 
threads. Collaborate together on 
documents in real-time. Use face-to-face 
video calls when typing just wont do. 


Read more 


图 12-3” 带 有 彩色 文字 和 边框 的 按钮 ， 在 清一色 黑白 文字 中 脱颖而出 
网 页 部 有 目的 , 可 能 是 讲述 一 个 故事 , 也 可 能 是 为 了 收集 信息 , 或 者 是 要 求 用 户 完 成 菏 些 任 
务 。 在 核心 目标 之 外 ,还 可 能 会 有 导航 元 系 、 广 告 、 文 本 段落、 填 满 版 权 信息 和 友情 链接 的 页 脚 
等 。 设 计 师 的 工作 是 让 最 重要 的 信息 突显 出 来 ， 而 我 们 作为 开发 者 ， 是 不 要 弄 乱 设计 师 的 设计 。 


























12.1.1 建立 模式 


为 了 创建 模式 ， 有 些 在 我 们 看 来 并 没有 那么 重要 的 细节 ， 设 计 师 也 可 能 会 非 党 关注。 比如 某 
些 元 素 之 间 精 确 的 距离 , 对 多 个 不 同 的 组 件 使 用 相同 的 边框 圆 角 和 盒 阴 影 。 设 计 师 甚至 还 会 天 注 
字符 的 间距 和 文本 行 间距 。 

图 12-4 展示 了 一 张 视觉 稿 ,， 它 使 用 像 系 精确 标注 了 各 个 子 元 系 的 间距 。 我 们 把 设计 图 转化 为 
代码 时 ， 保 证 精确 还 原 这 个 过 程 很 枯燥 〈 有 时 候 还 很 难 ) 

视觉 稳 里 使 用 粉色 的 方 框 来 标注 那些 测量 过 的 间距 。 例如 ,导航 业 单 里 的 按钮 之 间 的 距离 是 
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10px， 主 图 的 压 问 和 三 个 日 底 栏 的 项 端 之 间 的 距离 是 40px， 每 个 栏目 的 标题 和 后 续 文 本 段落 之 
间 的 距离 是 30px， 等 等 。 有 些 固定 的 间距 长 度 可 能 会 在 页 面 上 多 次 重复 出 现 ， 这 有 助 于 建立 模 
式 的 视觉 一 致 性 。 比 如 ，10px 和 25px 间距 在 这 个 页 面 上 就 比较 通用 。 

下 面 我 们 进一步 研究 一 下 案 竣 设计 的 两 个 方面 : 颜色 选择 和 间距 控制 〈 排 版 也 非常 重要 ， 
第 13 革 将 重点 关注 )。 我 们 将 演示 如 何 精 确 地 还 原 图 12-4 所 示 的 设计 。 同 时 ,你 要 意识 到 网 站 
是 随时 间 不 断 演化 的 。 还原 了 视觉 稳 只 是 完成 了 一 部 分 工作 , 后 续 还 要 添加 新 特性 和 新 内 容 ， 需 
有 要 始终 忠于 设计 师 的 愿景 。 基 于 此 ， 我 们 看 看 做 好 这 份 工作 需要 考虑 哪些 因素 。 
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1080px 
Copyright © 2017 Ink, Inc. 
图 12-4 ”市 有 测量 标注 的 网 页 设计 视觉 称 


12.1.2 还原 设计 稿 


先 创建 一 张 新 页 面 ， 并 链接 新 的 样式 表 。 把 代码 清单 12-1 中 的 标记 代码 复制 到 页 面 中 。 我 
们 会 把 整个 设计 页 面 划分 成 多 个 模块 ， 后 续 革 市 会 讲解 如 何 编写 样式 。 


代码 清单 12-1 页 面 标记 


<head> 





<link rel="stylesheet" href="styles.css"> 
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</head> 
<body> | 顶部 导航 容器 
<nav class="nav-container"> 
<div class="nav-container jinner"> 
<a Class="home-link" href="/">Ink</a> 
<ul class="top-nav"> 
<1i><a href="/features">Features</a></11i> 
<1i><a href="/pricing">Pricing</a></11i> 
<l1i><a href="/support">Support</a></1i> 








<]11 class="top-nav_ featured"><a href="/login">Login</a></11i> 
< /> 
</div> 
</nav> 
| 巨大 的 主 图 
<div class="hero"> 


<div class="hero inner"> 
<h2>Team collaboration done right</h2> 
<a href="/sign-up" class="button button--cta">Get started</a> 
</div> 
</div> 


<div class="container"> 三 栏 板块 


<div class="tile-row"> 
<div class="tile"> 
<h4>Work together, even if you're apart</h4> 





<p>Organize your team conversations into threads. Collaborate 
together on documents in real-time. Use face-to-face <a 
href="/features/video-calling">video calls</a> when typing just won't 
do.</p> 
<a href="/collaboration" class="button">Read more</a> 
</div> 


<div class="tile"> 
<h4>Take it with you</h4> 
<p>Ink is available on a wide array of devices, sO you can work from 
anywhere:</p> 
<ul class="tag-list"> 
<l1i>Web</11i> 
<l1i>iO0OS</11i> 
<1i>Android</1i> 





<li>Windows Phone</11i> 





</ul> 





<a href="/supported-devices" class="button">Read more</a> 
</div> 


<div class="tile"> 
<h4>Priced right</h4> 
<p>Whether you work on a team of three or a three hundred, you'll 

find our tiered pricing reasonable at every level.</p> 
<a href="/pricing" class="button">Read more</a> 

</div> 

</div> 
</div> 
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<footer class="page-footer"> 
<div class="page-footer inner"> 
Copyright &copy; 2017 Ink, Inc. 
</div> 
</footer> 
</body> 


我 们 使 用 了 BEM 风格 来 为 类 命名 ， 以 便 清楚 地 知道 哪个 元 素 属于 哪个 模块 。 双 下 划 线 代表 
模块 的 子 元 系 , 比如 hero__inner; 双 连 字符 代表 模块 变 体 ， 比如 button--cta( 人 参见 第 9 草 )。 
我 们 将 以 自己 的 方式 来 完成 这 些 模块 ， 第 一 步 先 来 看 看 它们 使 用 的 颜色 。 








12.2 颜色 


设计 师 交 付 设计 稿 时 ， 一 般 会 交 给 你 一 个 很 大 的 PDF 文档 。 文 档 包 含 几 个 部 分 ， 其 中 一 个 
很 大 的 部 分 是 由 整 页 的 视觉 稿 组 成 ， 就 像 图 12-4 展示 的 那样 。 但 在 这 之 前 ， 设 计 师 需要 先 准备 
一 些 基础 设计 。PDF 文档 可 能 会 包含 一 两 页 关于 多 种 标题 和 正文 副本 的 排版 示例 , 还 可 能 会 有 一 
些 基础 UI 元 系 的 详细 列表 ， 比 如 链接 和 按钮 ， 同 时 包含 它们 的 各 种 状态 ， 比 如 鼠标 惹 俘 和 激活 。 
此 外 还 包括 网 站 使 用 的 调 色 板 。 

调 色 板 通 党 就 像 图 12-5 所 示 的 这 样 ， 列 出 了 全 站 使 用 的 所 有 颜色 样本 及 对 应 的 十 六 进 制 颜 
色 值 。 设 计 师 一 般 会 为 每 种 颜色 取 一 个 名 字 ， 后 面 的 明细 规范 文档 中 可 以 使 用 这 些 命名 。 

















#076448 “品牌 绿 #868e96 ”灰色 


#f1f3f5 浅 灰 色 


#099268 ” 深 绿 色 


#20c997 ”中 绿色 #f8f9fa 超 浅 灰 


a 
二 国生 
避 国 戎 





#212529 ”文本 颜色 #fffff 白色 


图 12-5 网 站 的 调 色 板 


调 色 板 一 般 会 有 一 种 主 色 ， 其 他 颜色 基于 主 色 。 主 色 一 般 从 公司 的 品牌 或 者 LOGO 中 衍生 
出 来 。 这 个 例子 中 ， 主 色 是 品牌 绿 ( 图 12-5 的 左上 角 )。 调 色 板 中 的 其 他 颜色 一 般 是 同一 色 系 不 
同 明 暗 度 的 颜色 ,还 有 一 些 补 充 颜 色 。 大 部 分 调 色 板 也 会 有 黑色 和 上 日 色 (虽然 可 能 不 是 纯 黑 白 的 
#000000 或 者 #ffffff )， 以 及 少量 的 灰色 。 

因为 这 些 颜 色 会 在 CSS 中 多 次 重复 出 现 ， 所 以 将 它们 指定 为 变量 可 以 方 省 很 多 时 间 。 男 外 ， 
如 条 总 是 一 次 次 地 输入 十 六 进 制 什 ， 无 法 保证 一 定 不 出 错 。 

我 们 先 为 页 面 统 一 添加 一 些 基 础 样式 , 也 包括 为 调 色 板 中 的 每 种 颜色 指定 变量 , 以 便于 复 用 
它们 。 图 12-6 所 示 的 页 面 看 起 来 不 怎么 像 视 觉 稿 ， 但 是 颜色 已 经 开始 贴近 视觉 稿 了 。 
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。 Pricing 


Team collaboration done right 


Get started 
Work together, even if you're apart 


Organize your team conversations into threads. Collaborate together on documents in real-time. Use face-to-face video calls when typing just won't do. 


i 
图 12-6 ”添加 了 基础 样式 和 一 些 颜 色 的 网 页 
添加 代码 清单 12-2 到 样式 表 中 。 
代码 清单 12-2 包括 颜色 变量 的 基础 样式 


html { 
--brand-green: #076448; 
--dark-green: #099268; 
--medium-green: #20c997; 
--text-color: #212529; 为 每 种 颜色 
--gray: #868e96; 指定 
--light-gray: #f1f3f5; 
--extra-light-gray: #f8f9fa; 
-white: #fff; 


box-sizing: border-box; 
COolor: var(--text-color); 


} 


* 
/ 


*;:before, 
*. :dfter { 
box-sizing: inherit,; 





} 
body { 
margin: 0; 
font-family: Helvetica, Arial, sans-serif; 
line-height: 1.4; 
background-color: var(--extra-light-gray); 
} 
hi; hh2,. hh3, ha 4 
font-family: Georgia, serif; 设置 标题 字体 
, 用 到 颜色 的 地 方 
以 变量 代替 
| 


Color: var(--medium-green),;} 
} 
a:visitedqd { 

Color: var(--brand-green);} 
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] 
a:hover { 
用 到 颜色 的 地 方 
lor: (==bD > ) ; > 
Color: var rand-green 以 变量 代替 
alTVE 1 先 为 链接 激活 状态 占 位 ， 
} 后 面 需要 改 成 红色 


这 里 我 们 对 颜色 使 用 了 自 定 义 变 量 ( 如 果 需 要 复习 一 下 相关 知识 , 参见 第 2 章 2.6 间 。 使 用 
变量 以 后 , 一旦 后 续 需 要 修改 这 些 值 ， 就 会 很 省 事 。 我 曾经 参与 过 的 一 个 项 目 ， 已 经 进行 到 后 期 
了 ， 设 计 师 决定 调整 品牌 颜色 。 我 只 需要 在 一 个 地 方 修改 一 下 变量 , 非 和 简单 ,但 实际 上 已 经 修 
改 了 代码 里 所 有 用 到 变量 的 地 方 。 


说 明 为 简单 起 见 ， 我 在 例子 中 直接 使 用 了 CSS 自 定 义 属 性 ， 你 也 可 以 在 项 目 中 使 用 ， 
无 须 另 外 安装 特定 工具 。 但 如 果 项 目 需要 支持 IE 或 者 其 他 旧版 浏览 器 ， 那 你 就 需要 使 
用 预 处 理 器 变量 来 替代 。 关 于 预 处 理 器 的 介绍 ， 参 见 附录 B。 


这 里 我 们 对 激活 状态 下 的 链接 样式 占 了 个 位 置 ， 稍 后 还 会 回来 填充 颜色 。 在 此 之 前 ,我 们 先 
粗略 地 布局 页 面 。 我 们 先 把 页 面 涉 及 的 各 主要 区 域 放 在 正确 的 位 置 , 然后 添加 一 些 颜 色 和 字体 设 
置 ( 见 图 12-7 )。 这 里 先 不 要 天 注 间距 间 题 。 
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图 12-7 页面 元 系 粗 略 布 局 ， 并 添加 了 初始 样式 


我 们 从 顶部 开始 ,分 三 个 部 分 来 进行 : 头 部 区 域 、 主 图 区 域 和 三 栏 主体 部 分 。 大 部 分 工作 可 
以 复 用 前 面 草 节 讲 到 的 技术 。 然 后 我 们 再 回 过 头 来 调整 页 面 细 万 。 
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首先 是 头 部 以 及 导航 条 区 域 。 这 部 分 由 三 个 模块 组 成 : nav-Container home-1ink 和 
top-nav, 已 展示 在 代码 清单 12-3 中 ， 将 其 添加 到 样式 表 。 


代码 清单 12-3” 头 部 样式 
人 
aORKground -C0lors Var(e- medlium oreeny)y 
} 
.Nnav-container _inner { 
display: flex; 
Justify-content: space-between; 
max-width: 1080px; 





margin: 0 auto; 将 内 容 居 中 ， 限制 | 最 
} 大 宽度 为 1080px 
.home-link { 

Color: var(--text-color); 


font-size: 1.6rem; 
font-family: Georgia, serif; 
font-weight: bold; 
text-decoration: none; 


. 


使 用 弹性 布局 将 导 
top-nav 1 航 项 展示 为 一 行 
display: flex; 
list-style-type: none; 
} 
.top-nayv a { 
display: block; 
padding: 0.3em 1.25em; 为 每 个 导航 链接 添 
Color: var(--white),; 加 颜色 和 内 边 距 


background: var(--brand-green);} 
text-decoration: none; 
border-radius: 3px; 
} 
.top-nav a:hover { 
background-color: var(--dark-green); 
} 
.top-nav_ featured > a { 
Color: var(--brand-green); 
background-color: var(--white).; 
} 


.top-nav_ featured > a:hover { 





Color: var(--medium-green); 
background-color: var(--white); 


} 


整个 头 部 区 域 包 庄 了 一 个 nav-container。 这 里 我 们 使 用 了 双 容 需 的 模式 来 使 内 部 的 元 素 
居中 (可 以 回顾 一 下 第 4 董 的 相关 内 容 )。 这 样 可 以 实现 背景 颜色 一 直 延 伸 到 页 面 边 缘 ， 而 主体 
部 分 被 限制 了 宽度 。 主体 部 分 是 一 个 弹性 盒子 容器 , 使 用 justify-content: space-between 
将 内 容 置 于 两 端 : home-1ink 在 左 侧 RS 在 右 侧 。 EOD=TIo 也 使 用 了 弹性 布局 ， 这 样 其 
内 部 的 所 有 和 链接 都 排 成 一 行 ， 同 时 链接 的 颜色 使 用 自 定义 属性 进行 了 配置 。 
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接 下 来 ,我 们 为 主 图 区 域 涩 加 样式 。 这 部 分 包括 两 个 模块 ， 一 个 是 主 图 ， 羽 


加 代码 清单 12-4 到 样式 表 中 。 
代码 清单 12-4” 主 图 和 按钮 样式 


.hero { 
background: url(collaboration.jpg) no-repeat; 
background-size: cover; 
margin-bottom: 2.5rem; 

} 

.hero inner f{ 
max-width: 1080px; 
margin: 0 auto; 双 容 器 模式 
padding: 50px 0 200px; 


text-align: right; 简单 使 用 内 边 距 定 
位 标语 和 按钮 








} 
.hero h2 { 
font-size: 1.95rem; 


) 


.button { 
display: inline-block; 
padding: 0.4em lem; 
Color: var(--brand-green),;} i 
border: 2px solid var(--brand-green); 标准 按钮 梓 陈 
border-radius: 0.2em; 
text-decoration: none; 
font-size: lrem; 
} 
.button:hover { 
background-color: var(--dark-green).; 
Color: var(--white); 
} 
.button--cta { 
padding: 0.6em lem; 
background-color: var(--brand-green);} i 
Color: var(--white); CTA 按钮 变 体 
border: none; 


} 


像 头 部 一 样 ， 主 图 区 域 也 使 用 了 双 容 带 模 式 。 内 容 带 设置 了 一 些 内 边 距 ， 





个 是 按钮 。 沫 





这 里 的 内 边 距 值 只 


是 粗略 地 估算 的 。 区 域 布局 完成 之 后 ,我 们 还 会 回 到 这 里 ,到 时 候 我 会 指出 如 果 精 确 匹 配 设计 师 


的 视觉 稳 会 有 哪些 问题 。 


我 们 还 定义 了 一 个 按钮 模块 ， 默 认 的 外 观 是 日 色 按钮 ,市 有 绿色 的 边框 和 文字 。 页 面 的 主体 
部 分 底部 使 用 的 按钮 就 是 默认 样式 。 然 后 我 们 还 为 按钮 定义 了 一 个 CTA 变 体 ， 使 用 纯 绿 色 背 景 
和 白色 文字 (之 前 也 解释 过 ，CTA， 即 Call To Action 的 缩写 ， 是 一 种 针对 核心 元 素 的 营销 手段 ， 








希望 引导 用 户 使 用 。 在 这 个 例子 中 ，CTA 按钮 即 醒目 的 开始 按钮 ) 最 后 ， 我 们 为 图 12-8 所 示 的 





三 栏 主体 部 分 添加 样式 。 
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Work together, even if you're apart Take it with you Priced right 


Organize your team conversations into threads. Ink is available on a wide array of devices, so you Whether you work on a team of three or a three 


Collaborate together on documents in real-time. can work from anywhere: hundred, you'l| find our tiered pricing reasonable at 
Use face-to-face video calls when typing just won't every level. 
do. 。 Web 


。 Windows Phone 


Read more 


Copyright © 2017 Ink, In 


图 12-8 页 面 主 区 域 的 大 概 样式 


页 面 主体 部 分 由 以 下 几 部 分 组 成 : 限制 了 7 最 大 宽度 的 容 右 、 控制 三 栏 布局 的 tile-row 和 每 
一 栏 内 的 白色 板块 区 域 tile。 把 代码 清单 12-5 中 的 代码 添加 到 样式 表 ， 其 中 也 包含 了 页 脚 的 样 
了 式 。 因 为 之 前 添加 过 按钮 样式 ， 所 以 不 需要 再 考虑 这 些 了 。 


代码 清单 12-5 ”三 栏 和 板块 样式 


.Container { 











margin: 0 auto; 
max-width: 1080px; 
} 和 页 面 其 他 部 分 一 样 ， 设 
置 最 大 宽度 为 1080px 
.tile-row 1{ 
display: flex; 





} 

.tile-row > * { 

8 flex: 1; 使 所 有 栏 等 宽 
.tile { 


background-color: var(--white).; 
border-radius: 0.3em; 


) 


.bage-footer { 
margin-top: 3em; 
padding: lem 0; 
background-color: var(--light-gray); 
COlor: var(--gray); 
} 
.bage-footer inner f{ 
margin: 0 auto; 
max-width: 1080px; 


text-align: center; 和 页 面 其 他 部 分 一 样 , 设 
font-size: 0.8rem; 置 最 大 宽度 为 1080px 


】 


这 里 的 清单 又 一 次 使 用 了 双 容 融 模式 ， 将 宽度 限制 为 最 大 1080px。 同 时 为 板块 区 域 设 置 了 
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白色 背景 和 边框 贺 角 。 

页 脚 也 是 应 用 了 对 比 ,不 同 的 是 , 这 里 并 非 为 了 吸引 注意 力 ， 而 是 淡化 注意 力 。 这 部 分 设置 
了 浅 灰色 背景 ， 并 且 使 用 了 较 小 字号 和 灰色 文本 。 因 为 这 部 分 是 整个 页 面 上 最 不 重要 的 内 容 , 所 
以 不 需要 视觉 上 的 突出 。 使 用 让 人 容易 忽视 的 配色 就 仿佛 在 告诉 用 户 :“ 页 面 的 这 部 分 内 容 可 能 
并 不 是 你 要 找 的 ”。 


12.2.1 理解 颜色 表示 法 


我 们 调 色 板 里 的 颜色 都 是 使 用 十 六 进 制 表示 法 指定 的 。 这 是 一 种 简洁 明了 的 表示 法 ， 也 是 
Web 开发 者 从 Web 早期 就 开始 使 用 的 一 种 表示 法 , 但 这 种 颜色 表示 法 并 不 是 特别 好 用 ,现代 CSS 
也 支持 其 他 颜色 表示 法 ， 常 见 的 有 rgb () 和 hs1l() 函数 。 

rgb () 图 数 是 一 种 描述 红 、 绿 、 蓝 彩色 值 的 颜色 表示 法 ， 使 用 十 进 制 而 非 十 六 进 制 。 它 使 用 
0-255 取代 了 00-FF， 比 如 rgb(0，0，0) 代 表 纯 黑色 ( 相当 于 #000 )，rgb(136，0，0) 代 表 砖 
红色 ( 相当 于 #800 )。 

不 论 是 RGB ， 还 是 十 六 进 制 ， 理 解 起 来 都 有 点 难 。 我 们 见 到 一 个 颜色 全， 比如 #2097c9， 
或 者 它 对 应 的 RGB 颜色 ， 无 法 联想 到 它 在 页 面 会 演 染 成 什么 样 。 可 以 尝试 分 解 一 下 ， 它 的 红色 
值 (420 ) 非常 少 ， 绿 色 值 097 ) 处 于 中 等 水 平 ， 蓝 色 值 ( c9 ) 相对 较 多 。 可 以 分 析 得 出 是 蓝 
和 绿色 占 主导 ,但 是 有 多 上 暗 或 者 多 亮 呢 ”事实 上 ，RGB 颜色 表示 法 很 不 直观 ， 它 们 本 来 就 是 为 
计算 机 读 取 的 ， 不 适合 人 类 。 

HSL 则 是 一 种 更 适合 人 类 读 取 的 颜色 表示 法 ， 代 表 色 相 、 饱 和 度 和 明度 (或 者 光度 )。HSL 
的 语法 看 起 来 就 像 hsl (198，73%，46%) 这样， 相当 于 十 六 进 制 表示 的 #2097c9。 

hsl () 国 数 需要 3 个 参数 。 第 一 个 参数 表示 色相 ， 是 一 个 0~359 的 整数 值 。 这 代表 色相 环 上 
的 360 度 ， 从 红色 (0 )、 贯 色 ( 60 )、 绿 色 (120 )、 青 色 (180 )、 蓝 色 (240 )、 洋 红色 ( 300) 
依次 过 渡 ， 最 后 回 到 红色 。 第 二 个 参数 表示 饱和 度 ， 是 一 个 代表 色彩 强度 的 百分数 ，1008 的 时 
修 颜 色 最 鲜艳 ，0% 就 意味 着 没有 彩色 ， 只 是 一 片 灰 色 。 第 三 个 参数 表示 明度 ,也 是 百分数 ,代表 
颜色 有 多 亮 〈 或 者 多 暗 )。 大 部 分 鲜艳 的 颜色 是 使 用 50gs 的 明度 值 。 明 度 值 设置 得 越 高 ， 颜 色 越 
浅 ，100% 就 是 纯 魏 色 ; 设置 得 越 低 ， 颜 色 越 蜡 ，0g 了 就 是 黑色 。 例 如 ，hs1(198，73g8，46g) 这 
个 颜色 值 ， 包含 了 青 蓝 色 的 色相 、 偏 高 的 饱和 度 (73% ) 和 接近 50% 的 明度 ， 因 此 会 生成 一 个 比 
天 蓝 色 稍 深 一 些 的 蓝 色 。 


表 12-1 列 出 了 几 种 颜色 ,， 并 对 比 了 它们 的 十 六 进 制 、RGB 、HSL 和 颜色 命名 等 多 种 表示 法 。 
(一 共有 大 约 150 种 命名 颜色 可 以 在 CSS 中 使 用 ) 


表 12-1 颜色 表示 法 和 颜色 值 的 对 比 




















































































































Name Hex RGB HSL 
blue #0000ff FB.(0 0; 2253) hsl(240, 100%, 50%) 
lJavender #e6eb6fa EGB(2305. 230 HO) hsl(240, 67%, 94%) 
coral #ff7f50 rob(29597° 1427 30) hsl(16, 100%, 66%) 
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( 续 ) 
Name Hex RGB HSL 
Gold #ffd700 rgb(255, 215, 0) hsl(51, 100%, 50%) 
green #008000 rgb(0, 128, 0) hsl(120, 100%, 25%) 
tan #d2b48c rgb(210, 180, 140) hsl(34, 44%, 69%) 


融 悉 HSL 最 好 的 办 法 ， 就 是 去 使 用 它 。 推 荐 一 个 网 站 HSL Color Picker， 这 个 网 站 提供 了 一 
个 交互 式 颜 色 选 择 硕 ， 有 3 个 滑动 条 分 别 用 来 选择 3 个 参数 值 ， 还 有 一 个 用 来 设置 透明 度 。 可 以 
答 试 拖 动 一 下 滑动 条 ， 看 看 它们 是 如 何 影 响 最 终生 成 的 颜色 的 。 

说 明 RGB 和 HSL 表示 法 都 有 一 个 对 应 的 包含 alpha 通道 的 表示 法 : rgba() 和 hsla()。 


它们 接受 第 四 个 参数 ， 一 个 取 值 范围 在 0~1 的 数字 ， 用 来 表示 透明 度 。 此 外 ， 一 些 浏 
览 嚣 也 开始 支持 八 位 的 十 六 进 制 表示 法 ， 其 中 最 后 两 位 用 来 设置 alpha 通道 值 。 











1. 在 浏览 器 中 转换 颜色 

下 面 我 们 把 十 六 进 制 颜色 值 转换 成 HSL 表示 法 。 很 多 在 线 资源 可 以 为 我 们 提供 全 部 三 种 表 
示 法 ， 比 如 hslpickercom， 但 是 最 简单 的 转换 方式 还 是 使 用 Chrome 或 者 Firefox 的 开发 者 工具 ， 
因为 我 们 经 常 开 着 它们 。 我 们 来 演示 一 下 在 Chrome 里 面 如 何 实现 。 

页 面 加 载 完 成 之 后 , 打开 浏览 大 的 开发 者 工具 (Mac 里 面 快捷 键 是 Cmd+Option+I, Windows 
里 面 是 Ctrl+Shift+I ), 在 Elements 面板 下 ,点 击 并 选中 <html> 标 签 ,相应 的 样式 就 会 展示 在 Styles 
面板 下 ， 包 括 目 定义 的 属性 ( 如 图 12-9 所 示 )。 


EE wo 

















图 12-9 





Styles Event Listeners DOM Breakpoints Properties 


:hov .cls Ea 


element,. style { 
} :| 
html { listing-12.2.html:4! 
--brand-green: 国 #076448; | 
--dark-green: 国 #099268 ; | 
--medium-green: 国 #20c997; ; 
--text-color: 国 #212529; | 
--gray: 国 #868e96; 
-—light-gray: #f1f3f5; 
——extra-light-gray: #f8f9fa; 
——white: hsl(0, 0%, 100%),; 
box-sizing: border-box; 
color: var(--text-color); 


} 

*，*: :before, *::after { listing-12.2.html:16 
pe 

上 

html { user agent stylesheet 


display: block; 





应 用 的 颜色 都 显示 在 开发 者 工具 的 Styles 面板 中 ， 按 住 Shift 并 点 击 颜色 值 劳 
边 的 小 方块 ， 可 以 循环 展示 十 六 进 制 、RGB 和 HSL 表示 法 


每 个 颜色 值 劳 边 都 有 一 个 小 方块 ， 用 来 展示 颜色 示例 。 如 果 你 按 住 Shift 健 ， 用 鼠标 点 击 这 
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个 小 方块 , 十 六 进 制 值 就 变 成 了 RGB 值 ; 再 次 点 击 , RGB 值 变 成 了 HSL 值 ; 第 三 次 点 击 叉 变 回 
了 十 六 进 制 表示 法 。 


说 明 这 种 循环 变换 颜色 表示 法 的 技巧 也 适用 于 Firefox 开发 者 工具 。 有 点 可 惜 的 是 ， 
Firefox 浏览 器 中 ， 它 仅 适 用 于 常规 属性 ， 而 不 适用 于 本 例 中 这 种 自 定义 属性 指定 的 颜色 值 。 
如 有 果 你 想 更 深入 一 些 , 单 击 小 方块 可 以 打开 一 个 全 色 选 择 右 对 话 框 ( 如 图 12-10 所 示 )， 然 
后 你 就 可 以 更 精细 地 调整 颜色 ， 也 可 以 从 调 色 板 中 选择 颜色 ， 或 者 切换 十 六 进 制 、RGB 和 HSL 
表示 法 。 对 话 框 里 还 包含 一 个 滴 管 工具 , 可 以 直接 从 页 面 里 提取 颜色 。Firefox 提供 了 类 似 的 颜色 
选择 硕 ， 但 是 功能 没有 这 人 么 多 。 
</ul> 
</nav> 


p<div classs 
p<div classs 










"EL 


“和 


| 162 87% 21% 1 、 
| html | body nav.ni | , ” 


Styles Event Liste 


| 国 国 国 国 故国 国 国 : 
eLement .styLe { 本 加 国 国 国 国 国力 


国 国 国 

html { i 
图 --brand-green: 图 hsL(162，87%，21%) ; 

图 --dark-green: 国 hsL(162，88%5，30%) ; 

图 --medium-green: 国 hsL(162，73%，46%) ; 


图 --text-color: 图 hsL(210，11%，15%) ; 
BD Arau* Ehc1(210 79- SA9-1， 


图 12-10 使 用 颜色 选择 名 对话 框 微 调 颜 色 





:hov .cls a 


listing—-12.2.html:4 


2. 把 样式 表 切 换 为 HSL 颜色 

十 六 进 制 颜色 一 般 可 以 满足 需求 ,但 是 转换 成 HSL 值 可 以 更 方便 地 进行 闫 色 微调 ， 也 更 容 
匈 找到 可 以 添加 到 网 站 的 新 颜色 。 我 们 把 网 站 的 颜色 都 转换 成 HSL 格式 ， 并 且 观 察 一 下 它们 。 

复制 开发 者 工具 里 面 的 HSL 颜色 值 ， 粘 贴 到 样式 表 中 。 样 陈 表 中 的 对 应 部 分 应 该 如 代码 清 
单 12-6 所 示 。 


代码 清单 12-6 ”把 十 六 进 制 颜色 转换 成 HSL 值 








html { 
--brand-green: hsl(162, 87%, 21%); 3 
__dark-green: hsl(162, 88%, 30%); 绿色 都 使 用 


- -medium_green: hsl(162, 73%, 46%); 相同 的 色相 
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—-—text-color: hsl(210, 11%, 15%); 


-Orays fiol(210. -7% S066)) 文字 颜色 和 灰色 
--light-gray: hsl(210, 17%, 95%); 都 不 是 纯 灰 


--extra-light-gray: hsl(210, 17%, 98%); 
--white: hsl(0, 0%, 100%); 


box-sizing: border-box; 
COolor: var(--text-color); 


} 


把 颜色 都 改 成 HSL 表示 法 之 后 ， 有 些 事情 就 变 得 显而易见 了 。 前 先 ， 你 会 发 现 三 种 绿色 都 
使 用 了 相同 的 色相 值 。 如 果 不 看 浏览 器 ， 你 很 难 一 下 子 认 出 162 表示 一 种 蓝 绿色 ， 但 很 容易 发 
现 这 三 种 颜色 之 间 存 在 相似 的 地 方 。 如 果 使 用 十 六 进 制 值 ， 你 很 难 察觉 到 ,但 是 换 成 HSL 值 就 
比较 明显 了 。 了 人 解 这 些 之 后 , 在 调 色 板 中 再 加 一 种 绿色 就 会 很 容易 。 如 果 需 要 用 到 同样 颜色 的 较 
浅 色 调 ， 我 们 就 可 以 尝试 写 hsl1(162，50%，80%) ， 然 后 在 浏览 器 的 开发 者 工具 里 微调 饱和 度 
和 明度 ， 直 到 看 上 去 合适 为 止 。 

你 也 可 能 发 现 灰 色 并 不 是 纯 灰 ， 它 们 有 相同 的 色相 值 , 也 各 目 有 不 太 大 的 饱和 度 值 。 单 看 颜 
色 本 身 , 你 可 能 发 现 不 了 这 些 , 但 就 是 这 些小 细节 ， 让 我 们 的 页 面 看 上 去 更 丰富 多 彩 。 真 实 志 界 
里 几乎 不 存在 完全 无 彩 的 灰色 ， 而 且 我 们 的 眼睛 也 乐于 看 到 光彩 ， 哪 怕 极 淡 。 


说 明 设计 师 一 般 会 在 调 色 板 中 使 用 多 个 不 同 的 灰色 。 按 照 我 的 经 验 ， 准 备 得 再 充分 ， 
还 是 避免 不 了 需要 其 他 的 灰色 。 不 论 是 比 超 浅 灰 更 浅 的 颜色 ,还 是 介 于 灰色 和 浅 灰 之 间 
的 颜色 ， 需 求 总 是 存在 的 。 这 样 一 来 ， 变 量 命名 就 成 了 问题 。 基 于 这 样 的 原因 ， 可 以 考 
虑 使 用 数值 来 命名 ， 比 如 --gray-50 或 者 --gray-80， 这 里 的 数字 大 和 致 等 于 明度 值 。 
使 用 这 样 的 命名 方式 ， 有 需要 时 就 可 以 在 已 有 的 颜色 值 之 间 再 插入 一 个 。 


总 之 ， 在 实际 项 目 开发 中 ,我 们 没有 必要 把 所 有 的 颜色 都 转换 成 HSL 格式 。 什 么 时 候 有 需 
要 了 ,使 用 HSL 可 以 轻松 处 理 颜色 。 


12.2.2 ”添加 新 颜色 到 调 色 板 


有 了 时 可 能 会 需要 某 种 颜色 ,但 是 设计 师 没 有 提供 ， 比 如 红色 的 报错 信息 或 者 蓝 色 的 信息 框 。 
有 经 验 的 设计 师 一 般 会 对 这 种 情况 提供 通用 的 解决 方案 , 但 作为 开发 者 , 在 需要 为 调 色 板 添加 新 
颜色 时 ， 我 们 依然 需要 思考 自己 的 解决 方法 。 

样式 表 里 已 经 为 链接 激活 状态 的 颜色 保留 了 位 置 。 激活 的 链接 一 般 是 红色 , 这 是 用 户 代理 的 
样式 表 提 供 的 , 但 这 种 红色 偏 这 ， 看 起 来 有 些 卡通 ,在 当前 页 面 不 是 非常 合适 。 我 们 需要 找 一 种 
不 太 亮 的 颜色 来 搭配 页 面 整体 的 绿色 。 

为 某 种 颜色 寻找 一 个 搭配 的 颜色 ， 最 简单 的 方式 是 找到 它 的 补 色 〈complement )。 补 色 位 于 
色相 环 的 对 侧 位 置 ， 蓝 色 的 补 色 是 黄色 ; 绿色 的 补 色 是 洋红 色 (或 者 紫色 ); 红色 的 补 色 是 青 

使 用 HSL 颜色 值 时 ， 计 算 补 色 非 常 简单 ， 为 色相 值 加 上 或 者 减 去 180 即 可 。 核 心 颜色 品牌 
绿 的 色相 值 是 162， 加 上 180 得 到 342 的 新 色相 值 ， 这 是 个 红色 ， 诈 一 点 点 洋红 。 我 们 也 可 以 通 
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过 减 去 180 来 寻找 补 色 ， 得 到 了 -18 的 色相 值 。 色 相 -18 其 实 等 同 于 色相 342， 因 此 hsl (-18， 
87%，21%) 和 hsl(342，87%，21%) 会 泻 染 成 同样 的 颜色 。 不 过 建议 把 色相 值 保 持 在 0~360 的 
江 围 内 ， 因 为 这 个 范围 内 的 颜色 与 色相 对 应 关系 我 们 比较 熟悉 。 

现在 有 了 色相 值 ， 我 们 还 需要 饱和 度 和 明度 。 页 面 上 的 通用 链接 颜色 是 中 绿色 ( hs1 (162， 
73%，46%) )， 我 们 就 从 这 里 人 手 。 因 为 绿色 是 主要 的 品牌 颜色 ， 我 们 不 希望 另 一 种 颜色 抢 走 太 
多 注意 力 ， 所 以 就 把 饱和 度 稍微 调 低 一 些 ， 比 如 低 10%。 这 样 就 得 到 了 新 颜色 hsl (342，63%， 
46%$)。 图 12-11 展示 了 这 种 红色 的 链接 激活 状态 。 

















Organize your team conversations into threads. 
Collaborate together on documents in real-time. 
Use face-to-face video calls when typing just wont 
do. 





图 12-11 红色 的 链接 激活 状态 


把 新 颜色 添加 到 样式 表 ， 按 代码 清单 12-7 编辑 代码 。 代 码 中 为 新 颜色 指定 了 目 定义 属性 
--redqQ， 人 然后 就 可 以 使 用 它 设 置 激活 链接 了 。 


代码 清单 12-7 ”添加 新 的 红色 到 调 色 板 
html { 

--brand-green: hsl(162, 87%, 21%); 
--dark-green: hsl(162, 88%, 30%); 
--medium-green: hsl(162, 73%, 46%); 
-—-text-color: hsl(210, 11%, 15%); 
--gray: hsl(210, 7%, 56%); 
--l]ight-gray: hsl(210, 17%, 95%); 
--extra-light-gray: hsl(210, 17%, 98%); 
--white: hsl(0, 0%, 100%); 








--red: hsl(342, 63%, 46%); 自 定义 一 个 
I 红色 变量 
Dox-S1Lz1ndd: border-box; 
Color: var(--text-color);} 
} 
a:active { 在 激活 链接 上 
Color: var(--red)， 使 用 变量 


lL 


完成 了 以 上 这 些 , 重新 加 载 页 面 并 查看 实际 效 末 。 因 为 链接 的 激活 状态 不 是 默认 显示 的 ， 所 
以 这 稍微 有 点 膝 烦 。 我 们 需要 单 击 并 停留 在 链接 上 ,才能 触发 激活 , 一 旦 松手 又 会 变 回 绿色 。 俐 
单 起 见 ， 我 们 可 以 使 用 开发 者 工具 强制 激活 链接 。 

按 鼠 标 右键 点 击 链接 ， 在 荣 单 中 选择 “检查 ”或 者 “和 查看 元 素 " ， 就 可 以 打开 开发 者 工具 。 
如 图 12-12 所 示 ， 在 Elements 面 板 ， 右 键 点 击 <a> 标 签 ， 在 菜单 中 选择 :active"” (Firefox 浏 览 器 
中 选择 active )。 这 样 就 可 以 强制 浏览 各 显示 元 素 的 激活 样式 。 














中 在 较 新 的 Chrome 浏览 器 中 ， 需 要 在 Force state 的 二 级 菜单 中 选择 :active。 译 者 注 
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a href="/pricing”>Pricing</r Ed 
/Li Add Attribute 


> <Li>..</Li Edit as HTML 
p<li class="top-nav__featured">, Copy > 


/ul 
/nav 
p<div class="hero">.</diyv 
><div class="container">.</diyv 
><footer class="page-footer">..</foog 


Hide element 
Delete element 


/body Expand all 
/htm\ Collapse all 
:hover 
:focus 
:visited 








图 12-12 开发 者 工具 可 以 强制 设置 元 素 为 激活 、 晨 停 、 聚 焦 或 者 浏览 过 等 状态 ， 这 样 
开发 者 就 可 以 预览 相应 状态 下 的 样式 了 


元 素 补 强制 为 激活 状态 ,我 们 就 可 以 查看 红色 是 什么 样 的 了 。 如 果 有 需要, 我 们 可 以 在 开发 
者 工具 里 实时 修改 样式 并 查看 如 何 影 响 元 系 。 

怎么 选择 合适 的 颜色 并 没有 什么 标准 方案 ， 而 使 用 HSL 确实 会 简单 一 些 。 先 找到 页 面 已 有 
颜色 的 补 色 ， 然 后 在 开发 者 工具 里 面 调整 饱和 度 和 明度 ， 就 可 以 找到 看 上 去 还 不 错 的 颜色 。 

如 果 你 想 更 深入 地 人 研究 颜色 选择 ， 可 以 上 网 浏览 颜色 理论 相关 的 文 草 。 你 可 以 从 Natalya 
Shelburne 所 写 的 这 篇 著名 的 文 草 Practical Color Theory for People Who Code 开始 。 


12.2.3 ”思考 子 体 颜色 的 对 比 效果 


你 可 以 已 经 注意 到 了 ， 字 体 颜 色 都 是 次 灰色 ， 而 不 是 纯 黑 (#000 )。 从 HSL 颜色 值 可 以 看 出 ， 
明度 值 是 15%， 而 不 是 0%。 使 用 灰色 而 非 纯 黑 是 向 见 做 法 。 在 背光 陈 计 算 机 屏 攻 上 ， 纯 日 色 背 景 
(#EEE ) 上 的 纯 黑色 文本 会 产生 强烈 的 对 比 效果 ,很 容易 在 阅读 时 造成 视觉 疲劳 ， 特别 是 大 段 的 文 
本 。 震 色 痛 景 上 的 日 色 文本 也 会 有 同样 的 问题 。 在 这 种 情况 下 , 要么 用 深 灰 色 代 蔡 涯 色 , 要 么 用 小 
灰色 代 蔡 白色 ， 或 者 都 检 换 挥 。 对 用 户 来 讲 ， 看 上 去 依然 是 黑 晶 的， 但 阅读 时 会 感觉 更 舒适 。 

我 们 不 想 让 文本 产生 过 于 强烈 的 对 比 效果 , 同样 也 不 希望 对 比 效 采 太 差 。 浅 灰色 背景 上 的 灰 
色 文 本 同样 难以 阅读 ， 甚 至 会 使 用 户 的 视力 受 损 。 在 阳光 下 看 智能 手机 ,也 是 一 样 。 那 么 我 们 怎 
样 才 能 实现 适当 的 对 比 效 果 呢 ? 

为 了 帮助 我 们 判断 ，W3C 的 Web 内 容 无 障碍 指南 ( Web Content Accessibility Guidelines， 
WCAG ) 提供 了 关于 对 比 度 最 小 值 的 建议 ( 称 为 AA 级 )， 更 严格 一 点 ， 还 有 加 强 型 对 比 度 
( 称 为 AAA 级 )。 鉴 于 大 号 文本 更 易于 阅读 ， 两 个 级 别 都 对 大 号 文本 的 对 比 度 适 当 放 宽 了 限制 。 
表 12-2 展示 了 建议 的 对 比 度 。 






























































表 12-2 WCAG 文本 对 比 度 建 议 
Level AA Level AAA 
普通 文本 4.5:1 I 
大 所 文本 3 4.5 :1 
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WCAG 定义 的 大 号 文本 ， 是 指 未 加 粗 的 18pt ( 24px ) 及 其 以 上 的 文本 ,或 者 加 粗 的 14pt 
(18.667px ) 及 其 以 上 的 文本 。 也 就 是 说 ， 正 文字 体 应 该 达到 或 者 超出 普通 文本 建议 的 对 比 度 ， 
标题 文本 应 该 达到 或 者 超出 大 号 文本 建议 的 对 比 度 。 

WCAG 同 样 提供 了 一 个 计算 对 比 度 的 公式 ,但 我 从 来 不 操心 数学 计算 , 因为 使 用 工具 更 简单 。 
在 线 就 有 很 多 可 用 的 工具 , 搜索 “CSS 颜色 对 比 检查 髓 ”( CSS color contrast checker ) "可 以 查看 。 

每 个 工具 都 各 有 优 劣 ,我 比较 豆 欢 的 一 个 是 contrast ratio。 这 款 检 查 需 文 持 所 有 可 用 的 CSS 
颜色 格式 。 把 背景 颜色 和 文本 颜色 粘 进 去 ， 就 可 以 显示 计算 好 的 对 比 度 〈 如 图 12-13 所 示 )。 鼠 
标 悬 停 在 数字 上 ， 就 可 以 查看 其 是 否 通过 了 WCAG 的 哪 种 字号 的 AA 级 或 者 AAA 级 。 





























Text color: 


LBackground; | 


Passes AAA level for any size 
Ho text 


图 12-13 ”背景 颜色 和 文本 颜色 计算 得 出 15.1:1 的 对 比 度 


众多 设计 图 中 ， 并 不 见得 每 处 文字 都 要 达到 AAA 对 比 级 别 ，WCAG 的 建议 也 提 到 了 这 些 。 
比较 好 的 处 理 方案 是 主体 文本 达到 AAA 级 别 ， 对 于 那些 彩色 标签 或 者 其 他 闭 饰 性 文字 ， 可 以 稍 
微 随意 一 点 ， 达 到 AA 级 别 就 好 。 

同时 ,要 意识 到 并 不 是 通过 了 数学 计算 就 万 事 大 吉 了 ,因为 有 一 些 字 型 并 非 那么 易 读 , 尤其 
是 在 设计 中 使 用 了 纤细 字体 时 。 图 12-14 展示 了 同一 段 文字 的 两 个 副本 。 虽 然 两 个 副本 使 用 了 相 
同 的 颜色 ， 但 感知 到 的 对 比 度 不 一 样 。 


















Organize your team conversations into threads,. Organize your team conversations into threags,. 
Collaborate together on documents in real-time,. Collaborate together on documents in real-time. Use 
Use face-to-face video calls face-to:-face video calls when typing just wont oo 





图 12-14 ”虽然 颜色 相同 ， 但 是 纤细 字体 导致 了 视觉 上 的 对 比 度 不 足 
图 12-14 的 两 个 段落 都 使 用 了 Helvetica Neue 字体 ， 但 左 侧 段落 设置 字 重 为 300 (一 般 称 为 
较 轻 或 者 图 书 装帧 ), 右 侧 段落 设置 字 重 为 100 (纤细 )。7 : 1 的 对 比 度 对 左 侧 的 文字 来 说 效果 已 
经 很 好 了 ， 但 是 对 右 侧 文字 来 说 可 能 需要 更 高 的 对 比 度 。 


提示 “只 有 部 分 字体 提供 了 纤细 的 字 重 ， 使 用 时 为 保证 可 读 性 ， 一 定 要 设置 强烈 的 颜色 
对 比 。 

















J 这 里 建议 使 用 搜索 引擎 直接 搜索 英文 ， 中 文 可 能 搜 不 到 。 一 一 译 者 注 
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12.3 ”间距 


搞 消 楚 了 颜色 之 后 ,我 们 来 看 设计 师 在 视觉 稳 中 标注 的 那些 精确 的 间距 。 开 发 过 程 中 ,这 部 
分 工作 比较 枯燥 , 而 且 后 期 设计 师 审查 时 可 能 还 会 反复 调整 ,指出 一 些 需 要 修改 的 跟 视 觉 稳 不 一 
致 的 实现 。 

这 部 分 工作 里 的 大 多 数 内 容 可 以 简单 归结 为 正确 设置 元 素 的 外 边 距 一般 从 最 容易 的 地 方 开 
始 ， 哪 怕 后 面 可 能 需要 再 做 一 些 调整 。 我 们 需要 思考 两 件 事情 ， 一 个 是 是 否 需要 使 用 相对 单位 ， 
为 一 个 是 行 蜗 如 何 影 响 垂 下 间距 。 


























12.3.1 使 用 em 还 是 px 


考虑 使 用 相对 单位 还 是 绝对 单位 ,是 非常 重要 的 决定 ,因为 设计 师 一 般 使 用 像素 来 标注 距离 ， 
所 以 使 用 绝对 单位 会 比较 容易 ， 但 是 使 用 相对 单位 会 有 很 多 好 人 处， 不 论 em 还 是 rem。 

我 们 来 看 一 下 导航 菜单 里 标注 的 距离 ( 如 图 12-15 所 示 )， 每 个 子 项 之 间 需 要 10px， 子 项 底 
边 与 导航 条 底部 边界 之 间 也 是 10px。 


10px 10px pp 
到 ， 
图 12-15 ”每 个 导航 项 之 间 和 周围 都 需要 10px 


整个 第 2 章 都 在 讨论 使 用 相对 单位 的 好 处 ， 尤 其 是 可 以 使 用 啊 应 式 字 号 〈 font-size: 
calc (0.5em+lvw) )， 这 就 允许 我 们 的 设计 可 以 按 比 例 缩放 字体 。 在 较 大 的 屏幕 上 , 字号 就 可 以 
相应 变 大 ， 基 于 em 和 rem 的 外 边 距 也 随 之 变 大 。 在 用 户 修改 了 浏览 益 的 默认 字号 的 时 候 ， 相 对 
单位 的 好 处 也 能 体现 出 来 。 

然而 因为 这 种 使 用 响应 式 字 号 的 技巧 相对 比较 新 ， 所 以 大 部 分 设计 师 不 太 习 惯 使 用 相对 
单位 。 如 果 你 打算 使 用 这 个 技巧 ， 可 能 就 需要 先 跟 设计 师 讨 论 一 下 ， 而 且 你 必须 自己 去 做 单位 



































如 果 决 定 使 用 像素 ,短期 内 工作 会 比较 轻松 , 但 这 也 意味 着 后 面 的 设计 将 缺少 弹性 。 可 能 会 
导致 将 来 有 更 多 的 工作 ， 当 然 这 也 不 一 定 。 如 果 决 定 使 用 相对 单位 ， 前 期 就 需要 多 做 一 些 工 作 ， 
但 是 设计 会 更 强大 稳固 。 

因为 使 用 像素 相对 比较 简单 ( 比如 在 需要 时 直接 设置 外 边 距 或 者 内 边 距 为 10px )， 所 以 我 们 
使 用 em 来 实现 导航 荣 单 ， 演 示 比 较 复 杂 的 实现 过 程 。 

在 设计 规范 中 , 导航 条 里 的 标注 测量 值 显示 菜单 项 需要 10px 的 环绕 间距 ( 如 图 12-15 所 示 )。 
因为 基础 字号 是 16px， 我 们 计算 一 下 ， 使 用 期 望 长 度 除 以 基础 字号 ，10 除 以 16 得 到 0.625， 所 
以 这 里 的 间距 就 是 0.625em。 现 在 可 以 把 代码 清单 12-8 中 的 代码 添加 到 样式 表 。 
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代码 清单 12-8 ”使 用 内 边 距 和 外 边 距 设置 导航 区 域 的 间距 
.nav-container { 
background-color: var(--medium-green).; 
lL 
.nav-container jinner { 
display: flex; 
Justify-content: space-between,; 





nn 为 整个 导航 条 的 项 部 和 底部 
margin: 0 auto; 添加 10px 的 内 边 距 





padding: 0.625em 0; 
} 


人 


.top-nav { 移 除 用 户 代理 样式 表 为 列表 


display: flex; 2 
默认 添加 的 外 
list-style-type: none; 元 素 默 认 深 加 的 外 边 距 


margin: 0; 


, 每 个 导航 项 之 间 添加 10px 
.top-nav > 11 + 11 { 的 水 平 外 边 距 
margin-left: 0.625em; 


} 


处 理 间 距 时 , 需要 知道 什么 时 候 应 该 使 用 内 边 距 , 什么 时 候 应 该 使 用 外 边 距 ,在 这 个 例子 中 ， 
nav-container _inner 应 该 使 用 内 边 距 来 设置 王 直 间隔 ， 这 样 就 可 以 应 用 到 整个 容 磊 ， 最 左 
侧 的 页 面 标 题 和 顶部 导航 列表 都 可 以 填充 间距 ,然后 使 用 外 边 距 来 设置 每 个 导航 项 之 间 的 水 平 间 
阳 ， 因 为 我 们 希望 每 项 之 间 有 间隔 。 

主 图 下 方 和 三 栏 之 间 的 间隔 也 比较 简单 ( 如 图 12-16 所 示 )。 因 为 这 些 间隔 都 是 应 用 于 元 素 外 
部 ， 不 论 是 带 背 景 图 片 的 元 素 还 是 设置 背景 色 的 元 于 ， 所 以 需要 使 用 外 边 距 来 实现 间隔 。 


I A 


40px 























Work together, even if you're apart Take it with : 
Organize your team conversations into 25px Ink is available 
threads. Collaborate together on devices, so yol 


documents in real-time. Use face-to-face 


图 12-16 主 图 下 方 (40px ) 和 栏目 之 间 (25px ) 的 外 边 距 


再 次 使 用 像素 值 除 以 基础 字号 ， 把 长 度 转化 为 em。 主 图 下 方 的 40px 相当 于 2.5em 
(40/16=2.5$ 一 一 该 外 边 距 已 经 设置 了 )， 每 个 栏目 之 间 的 25px 相当 于 1.5625em ( 25/16 )。 添 加 代 
码 清单 12-9 中 展示 的 这 些 外 边 距 。 


代码 清单 12-9 ”为 主 图 下 方 和 栏目 之 间 添 加 外 边 距 
.hero { 
background: url(collaboration.jpg) no-repeat; 
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background-size: cover; 


margin-bottom: 2.5rem; | 确保 主 图 下 方 有 


} 40px 的 间距 


ey 


.tile-row { 
display: flex; 


.tile-row > * { 





lec: Hs 

: 

ee 每 个 栏目 之 间 添 加 
mAardLn- lett L3025enm; 25px 的 间距 


} 


像 这 种 容 瘟 ( 市 有 背景 图 片 或 者 背景 频 色 )， 一 般 它 们 之 间 的 间 隅 实现 起 来 很 简单 。 如 采 需 
要 调整 文本 行 之 间 的 间距 ， 比 如 段 沙 或 者 标题 里 面 的 文本 ， 就 比较 肪 烦 。 














12.3.2 思考 一 下 行 高 


视觉 稿 里 的 文字 周围 也 设置 了 一 些 间距 ,图 12-17 标 注 了 这 些 大 小 。( 这 里 可 能 有 点 看 不 清楚 ， 
这 和 是 一 个 日 色 板 块 ， 育 景 是 很 写 的 写 灰 色 。 顶 部 和 左 侧 距 离 白 色 板 块 的 边缘 各 有 25px 的 距离 。) 








于 25px 
Priced right 
25px | 30px 
Whether you work on ateam of three or 
a three hundred, youllfind our tiered 
pricing reasonable at every level. 
四 25px 


Read more 


图 12-17 板块 内 部 和 文字 周边 需要 设置 的 间距 


文字 周围 环绕 的 25px 间隔 ， 可 以 考虑 为 板块 添加 内 边 距 来 实现 : 25/16=1.5625em。 标 题 和 
正文 段落 之 间 的 30px， 就 不 是 这 么 简单 了 。 如 果 你 打算 在 两 个 元 素 之 间 设 置 30px 的 外 边 距 ， 那 
么 实际 上 这 两 行文 字 之 间 的 间隔 差不多 是 36px。 要 理解 为 什么 会 这 样 ， 需 要 先 看 看 元 素 高 度 是 
怎么 定义 的 。 

在 盒 模 型 中 ,元 素 的 内 容 盒子 为 内 边 距 所 环绕 ,然后 是 边框 ， 最 后 是 外 边 距 。 但 是 对 于 有 段 洲 
和 标题 这 样 的 元 素 , 内 容 盒子 并 不 是 只 有 显示 出 来 的 文字 区 域 , 元 素 的 行 高 决定 了 内 容 盒子 最 终 
的 高 度 ， 这 要 超出 字符 的 顶部 和 底部 。 如 图 12-18 所 示 ， 文 字 高 度 是 lam， 但 是 行 高 超出 了 文字 
上 下 边缘 一 点 。 
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Priced righti'> | 


实际 看 到 的 高 度 外 边 距 








Whether you 
work on a team 
图 12-18 行 高 定义 了 内 容 盒子 的 高 度 


网 页 里 的 行 高 是 1.4， 这 是 从 <body> 元 系 上 设置 并 继承 下 来 的 。 这 样 只 有 一 行文 字 的 元 系 ， 
内 容 盒 子 的 高 度 就 是 1.4em ,文字 在 内 部 尼 直 居中 ,字号 是 16px, 内 容 盒 子 的 最 终 高 度 就 是 22.4px。 
额外 的 6.4px 平均 分 配 到 文学 的 上 方 和 下 方 。 

因此 ， 如 果 为 标题 设置 30px 的 底部 外 边 距 ， 那 么 外 边 距 的 顶部 和 标题 文字 之 间 实 际 上 会 多 
出 来 3.2px。 外 边 距 的 下 方 , 段 洛 的 内 容 盒子 同样 会 多 出 来 3.2px( 超出 的 间距 是 一 样 的 ， 因 为 标 
题 和 段 洲 有 同样 的 行 遍 和 字号 )。 这 样 就 会 导致 标题 文字 和 有 段落 文字 之 间 的 实际 间隔 是 36.4px。 



































说 明 设计 师 习 惯 使 用 行距 (leading ) 来 表示 每 行文 字 之 间 的 间距 。 在 CSS 中 ,文字 
间距 由 行 高 控制 ， 不 能 直接 转换 成 行距 。 在 第 13 章 我 们 会 研究 如 何 调整 这 个 间距 。 


设计 师 通 常 不 会 在 意 一 两 个 像 泰 的 差异 , 但 相差 太 多 就 该 找 你 了 。 一 般 来 讲 , 行 高 越 大 , 或 
者 元 素 设 置 的 字号 越 大 ， 越 不 容易 察觉 到 实现 上 的 不 一 致 。 

要 解决 这 种 实现 差异 ， 就 需要 算出 额外 的 间距 并 在 外 边 距 中 减 去 它 。 不 要 设置 30px 的 外 边 
距 了 , 减 去 额外 的 6px， 得 到 的 是 24px， 再 除 以 16， 最 终 得 到 1.5em。 把 代码 清单 12-10 中 的 代 
但 添加 到 样式 表 中 。 


代码 清单 12-10 设置 板块 和 有 段 阔 间 距 


p { 
margin-top: 1.5em; 
margin-bottom: 1.5em; 


’ 














在 基础 样式 中 为 段 
党 添加 外 边 距 





a 


此] 


back d= COLOr: --white); 
ee 
a 增加 内 边 距 


padding: 1.5625em; 

} 

.tile > h4 { 
margin-bottom: 1.5em; 


) 
我 们 已 经 在 基础 样式 中 为 段落 设置 1.5em 的 外 边 跑 ， 整 个 网 页 所 有 的 段 洛 和 都 会 有 同样 的 间 
距 。 然 后 在 板块 标题 下 方 设置 了 一 样 的 距离 ( .tile > n4 )， 因 此 ， 不管 后 面 有 没有 段落 ， 标 


在 板块 标题 下 方 
添加 外 边 距 
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题 下 方 的 间距 都 会 一 直 相 同 。 这 是 由 于 存在 外 边 距 折 闭 ， 两 个 外 边 距 会 重 若 ,在 标题 和 上 段落 之 间 
生成 一 个 30px 的 间距 。 

视觉 稳 里 只 剩 最 后 一 组 间距 需要 实现 了 ， 那 就 是 主 图 中 环绕 标语 的 间距 。 这 部 分 视觉 稳 如 
图 12-19 所 示 。 











| 10px 10px 


| 95px 


Team collaboration done right 


出 16pxX 


图 12-19 设计 稿 需要 在 标语 上 方 设 置 95px 的 间距 ， 下 方 设置 16px 的 间距 
(标语 和 按钮 之 间 ) 





标语 的 行 高 一 样 会 影响 到 设置 这 些 间 距 ， 因 为 它 的 字号 更 大 。 标 语 字 号 是 1.95rem， 这 就 意 
味 着 乘 以 16px 的 基础 字号 之 后 ， 字 号 是 31.2px。 然 后 再 乘 以 1.4 倍 的 行 高 ， 最 终 算 出 行 高 是 
43.68px， 文 字 的 上 方 和 下 方 各 有 大 约 6px。 

既然 行 高 已 经 在 文字 上 方 占 据 了 6px ,我 们 只 需要 再 增加 89px 的 间隔 ,就 达到 了 期 望 的 9Spx。 
同 理 ， 标 语 下 方 只 需要 再 增加 10px， 就 达到 了 视觉 稿 中 显示 的 16px 间隔 。 这 里 面 涉及 了 大 量 的 
数学 计算 ， 有 时 最 简单 的 解决 办 法 是 和 设计 师 一 起 坐 下 来 ,在 浏览 需 里 实时 修改 这 些 间距 ,， 直 到 
设计 师 满意 为 止 。 

现在 我 们 已 经 知道 需要 为 标语 上 方 添加 89px 的 间隔 ， 下 方 添加 10px 的 间隔 ， 接 下 来 就 是 把 
这 些 值 转化 为 相对 单位 并 添加 到 样式 表 。89/16 得 到 5.5625em，10/16 得 到 0.625em。 把 代码 清 
单 12-11 中 的 这 部 分 代码 更 新 到 样式 表 中 ， 为 标语 添加 市 注释 的 声明 来 设置 位 置 。 


代码 清单 12-11 在 主 图 中 设置 标语 和 按钮 的 位 置 
.hero { 
background: url(collaboration.jpg) no-repeat; 
background-size: cover; 
margin-bottom: 2.5rem; 


} 


























margin: 0 auto; 蔡 换 之 前 的 估 值 
padding: 5.5625em 12.5em 12.5em 0; 


text-align: right; 


es HD “6 移 除 上 方 的 外 边 距 ， 因 为 hero inner 
的 内 边 距 已 经 提供 了 所 需 的 间距 


font-size: 1.95rem; 


margin-top: 0; Re 
| 设置 标语 和 按钮 


.hero inner { 
max-width: 1080px; 使 用 刚刚 计算 得 到 的 距离 


margin-bottom: 0.625rem; es > 
) 之 加 的 间距 





284 第 12 章 对比、 颜色 和 间距 











hero inner 元 素 的 顶部 内 边 距 设置 了 标语 上 方 所 需 的 间距 。 虽 然 设 计 稿 中 没有 指定 它 的 
右 侧 和 底部 内 边 距 ,但 我 们 也 设置 了 值 。 标 语 的 顶部 外 边 距 设 置 为 0, 这 样 就 不 会 在 hero__ inner 
的 内 边 距 上 再 增加 额外 的 距离 。 标 语 的 底部 外 边 距 使 用 rem 单位 而 不 是 em 单位 ， 这 是 因为 标语 
不 是 使 用 默认 的 16px 字号 。 


12.3.3 “为 行内 元 素 设置 加 距 


网 页 说 计 称 中 还 有 最 后 一 处 程序 细节 需要 实现 。 中 间 的 栏目 里 有 个 操作 系统 列表 ,只 有 在 这 
些 操作 系统 中 才 可 以 运行 Ink 应 用 程序 ( 如 图 12-20 所 示 )。 之 前 我 们 把 它们 放 在 了 一 个 无 序列 表 
里 面 ， 现 在 我 们 按照 视觉 稿 设计 的 样子 把 它们 放 在 一 行 显示 。 








Take it with you 


Ink is available on a wide array of 
devices, So you can work from anywhere: 


Web iOS Android Windows Phone 


Read more 


图 12-20 列表 项 需要 添加 样式 并 实现 行内 显示 


这 种 微型 布局 的 设计 在 一 些 标签 形 东 西 的 展示 上 很 常见 , 比如 博客 文章 的 标签 列表 或 者 商品 
的 分 类 ,我 们 在 这 里 也 使 用 这 样 的 设计 ,因为 这 可 以 带 来 一 些 你 应 该 比较 熟悉 的 且 有 童 思 的 东西 。 

这 种 布局 有 多 种 实现 方式 , 弹性 盒子 和 行内 元 条 是 两 种 比较 容易 想到 的 。 书 中 前 面 已 经 见 过 
很 多 弹性 盒子 布局 了 ， 这 里 可 以 考虑 使 用 行内 元 素来 实现 。 

很 容易 就 能 想到 一 些 样式 。 每 项 都 需要 设置 display: inline， 还 需要 少许 的 内 边 距 、 硼 
尽 颜 色 和 边框 圆 朋 。 开 始 时 感 党 设置 这 些 样式 承 够 了 ， 但 是 一 旦 内 容 出 现 折 行 ， 就 又 露 问题 了 。 
如 果 视 口 的 宽度 是 固定 值 或 者 内 容 持 续 增 加 ， 就 可 能 会 发 后 图 12-21 所 示 的 结 来 。 
































Web iOS Android Windows 
Phone 


图 12-21 折 行 的 时 候 ， 列 表 项 发 生 重 三 


每 一 行列 表 项 的 灰色 背景 会 和 另 一 行 的 列表 项 重 琶 ,原因 在 于 行 高 。 前 面 讲 到 过 , 文本 行 的 
高 度 是 由 行 高 乘 以 字号 决定 的 。 如 果 为 行内 元 素 添加 内 边 距 ， 元 素 本 身 会 变 高 ， 却 不 会 增加 文本 
行 的 高 度 。 文 本 行 的 高 度 只 由 行 高 来 决定 。 

要 解决 这 个 问题 ， 就 需要 增加 每 项 的 行 高 。 更 新 代码 清单 12-12 中 的 代码 ， 为 页 面 中 的 这 些 
标签 添加 样式 。 可 以 改变 行 高 的 值 ， 看 看 会 产生 什么 效果 。 
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代码 清单 12-12 


.tag—-list { 


为 标签 诱 加 样式 


1 nones 履 盖 用 户 代 理 默认 
padding-left: 0; 的 列表 样式 


} 

.tag—-list > 11 f{ 
display: inline; 
padding: 0.3rem 0.5rem; 
font-size: 0.8rem; 
border-radius: 0.2rem; 设置 很 大 的 行 高 , 折 行 
background-color: var(--light-gray); 的 时 候 增 加 垂直 间距 
line-height: 2.6; 

} 


只 有 行内 元 系 有 这 种 行为 。 如 来 一 个 元 系 是 弹性 子 元 素 (或 者 行内 块 级 元 系 ) 为 了 容纳 它 ， 
其 所 在 的 行 会 随 之 增高 。 当 然 我 们 一 样 需要 设置 水 平和 垂直 外 边 距 ， 为 子 元 系 之 间 增 加 间隔 。 利 
用 原本 就 有 的 日 色 育 景 ， 这 些 元 素 之 间 就 产生 了 我 们 想 要 的 间距 。 








说 明 注意 Windows Phone 这 个 子 元 素 ， 行 内 元 素 允 许 折 行 ， 但 在 弹性 盒子 或 者 行内 块 
中 ， 不 允许 折 行 ， 而 是 整个 元 素 折 下 来 多 出 一 行 。 最 终 选 择 哪 种 实现 方式 来 解决 问题 ， 
取决 于 实际 情况 ,不管 怎 样 ， 这 是 一 个 需要 注意 的 地 方 。 





这 样 就 完成 了 整个 页 面 的 实现 ， 看 起 来 应 该 完全 符合 图 12-22 所 示 的 视觉 稳 。 


Features Pricing 


Team collaboration done right 


Get started 





Work together, even if you're apart Take it with you Priced right 
Organize your team conversations into 
threads. Collaborate together on 


Ink is available on a wide array of 
devices, so you can work from anywhere: 


Whether you work on a team of three or 
a three hundred, youllfind our tiered 





documents in real-time. Use face-to-face 
video calls when typing just won't do. 


Read more 


Web iOS Android Windows Phone 


Read more 


Copyright © 2017 Ink, Inc 


图 12-22 ”完成 的 页 面 设计 


pricing reasonable at every level. 


Read more 


286 第 12 章 对比、 颜色 和 间距 








我 们 花 了 很 多 时 间 来 分 析 这 些 细节 。 很 多 开发 者 在 实现 网 页 时 不 太 在 意 细 节 , 但 只 有 做 好 细 
节 才 能 做 出 好 作品 ， 正 是 这 些 细 蔬 体 现 出 了 普通 和 优秀 的 差别 。 

在 你 写 CSS 时 ， 我 一 直 在 建议 你 花 些 时 间 来 完善 设计 细节 。 即 使 你 做 的 没有 设计 师 那 么 专 
业 , 也 要 相信 和 目 己 的 眼睛 。 试 春 这 里 调 大 一 点 距离 或 者 那里 调 小 一 点 距离 , 看 看 哪 种 看 起 来 更 好 ， 
多 人 花 点 儿 时 间 来 调试 。 不 要 过 分 使 用 颜色 ， 只 是 有 选择 地 放 在 需要 吸引 用 户 注 意 的 地 方 。 创 建 一 
任 的 模式 ,然后 打破 这 些 规律 的 模式 就 可 以 把 用 户 的 注意 力 吸引 到 页 面 最 重要 的 东西 上 了 。 
































12.4 总结 


口 选择 性 地 使 用 对 比 ， 来 把 用 户 注 意 力 吸引 到 页 面 上 重要 的 部 分 。 
口 使 用 HSL 颜色 表示 法 ， 让 颜色 人 处理 更 简单 更 易于 理解 。 

口 设计 师 执着 于 细节 时 ， 要 相信 和 他们 的 判断 。 

口 花 些 时 间 来 调整 间距 。 

口 牢记 行 高 可 以 影响 垂直 间距 。 
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本 草 概 要 

口 Web 字体 如 何 赋予 页 面 独特 的 体验 
口 使 用 谷歌 字体 API 

口 调整 字体 的 间距 ( 字 距 和 行距 ) 

口 Web 字 体 性 能 相关 因素 与 优化 

口 处 理 FOUT 和 FOIT 





网 页 设计 ， 成 也 字体 ， 败 也 字体 。 几 年 前 ，Web 开发 者 只 能 从 有 限 的 一 些 字 体 中 做 选择 ， 即 
所 谓 的 Web 安全 字体 ( Web safe font )。 这 些 字体 类 型 包括 Arial、Helvetica 、Georsgia 等 ， 大 部 分 
用 户 的 系统 会 安装 。 因 为 浏览 右 只 能 使 用 这 些 系 统 字 体 演 染 页 面 ， 所 以 我 们 必须 使 用 它们 。 我 们 
可 以 指定 非 系统 字体 , 比如 Helvetia Neue, 但 只 有 那些 碰巧 安装 了 这 球 字 体 的 用 户 才 能 正确 显示 ， 
其 他 用 户 只 能 看 到 通用 的 回 退 方案 。 

随 着 Web 字体 的 兴起 ， 情 况 改 变 了 。Web 字体 使 用 afont-face 规划， 告诉 浏览 絮 去 哪里 
找到 并 下 载 目 定 义 字 体 ,， 供 页 面 使 用 。 原 本 平淡 无 奇 的 页 面 ， 使 用 上 自 定 义 字 型 之 后 ， 可 能 就 改观 
了 。 这 仿佛 打开 了 一 个 新 世界 ， 我们 比 过 去 多 了 非常 多 的 选择 。 

使 用 不 同 的 字体 可 以 使 页 面 产生 不 同 的 观感 ,可 以 活泼 也 可 以 严肃 , 可 以 沉稳 可 信也 可 以 不 
拘 小 三。 看 图 13-1 的 字体 示例 ， 相 同 的 文字 设置 了 三 对 不 同 的 字体 。 左 上 角 的 例子 ， 标 题 使 用 
News Cycle， 正 文 使 用 EB Garamond。 这 样 看 起 来 比较 正式 ， 一 般 出 现在 新 闻 网 站 上 。 右 上 角 的 
例子 使 用 了 Forum 和 Open Sans， 看 上 去 就 没有 那么 正式 。 这 些 字 体 可 能 会 用 在 个 人 博客 或 者 小 
型 技术 公司 。 左 下 方 的 例子 使 用 了 Anton 和 Pangolin， 显 得 比较 活泼 ， 甚 至 有 点 像 动画 片 似 的 ， 43 
适合 儿童 网 站 。 只 换 了 一 下 字体 ， 别 的 什么 也 没 做 ， 我 们 就 可 以 完全 改变 页 面 的 氛围 。 
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The Dog and the Shadow 


It happened that a Dog had got a piece of meat and was carrying it home 
in his mouth to eat it in peace. Now on his way home he had to cross a 
plank lying across a running brook. As he crossed, he looked down and 


saw his own shadow reflected in the water beneath. 


Thinking it was another dog with another piece of meat, he made up his 
mind to have that also. So he made a snap at the shadow in the water, but 
as he opened his mouth the piece of meat fell out, dropped into the water 


and was never seen more. 


Beware lest you lose the substance by grasping at the shadow. 


It happened that a Dog had got a piece of meat and was carrying it 


cross a plank lying across a running brook. As he crossed, he looked 
down and saw his own shadow reflected in the water beneath. 


his mind to have that also. So he made a snap at the shadow in the 
Water but as he opened his mouth the piece of meat fell out, 
dropped into the water and was never seen more. 


Beware lest you lose the substance by grasping at the shadow. 





home in his mouth to eat it in peace. Now on his way home he had to 


Thinking it was another dog with another piece of meat, he made up 


The Dog and the Shadow 


It happened that a Dog had got a piece of meat and was 
carrying it home in his mouth to eat it in peace. Now on his 
way home he had to cross a plank lying across a running 
brook. As he crossed, he looked down and saw his own 
shadow reflected in the water beneath. 


Thinking it was another dog with another piece of meat, he 
made up his mind to have that also. So he made a snap at 
the shadow in the water, but as he opened his mouth the 
piece of meat fell out, dropped into the water and was 
never seen more. 


Beware lest you lose the substance by grasping at the 
shadow. 








图 13-1 


使 用 不 同 字 体 可 以 显著 影响 网 站 的 整体 感觉 


本 章 将 讲解 Web 字体。 我 将 展示 Web 字体 如 何 工作 ， 并 推荐 一 些 在 线 服务 ， 它 们 可 以 提供 
很 多 字体 供 你 选择 使 用 。 我 也 会 介绍 用 来 控制 学 体 排版 、 间 距 和 大 小 的 CSS 属性 。 理 解 这 些 属 
性 可 以 让 你 提升 网 站 的 可 读 性 ， 也 可 以 更 好 地 实现 设计 师 提 供 的 设计 稿 。 

排版 是 一 种 艺术 形式 ， 和 印刷 出 版 一 样 历史 悠久 。 本 董 讨 论 的 内 容 是 这 本 书 中 唯一 具有 几 百 





年 历史 的 话题 。 因 此 ,我 不 打算 太 过 详尽 地 阐述 这 部 分 内 容 ， 但 会 介绍 一 些 要 点 ， 以 及 如 何 将 其 


应 用 到 现代 Web 中 。 


13.1 Web 字体 











通过 在 线 服务 使 用 Web 字 体 是 最 简单 也 最 普 直 的 方式 。 常 见 的 如 下 所 示 。 





DQ Typekit 
DD Webtype 
口 谷歌 字体 
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无 论 付 费 还 是 收费 , 这 些 服 务 都 为 你 解决 了 很 多 问题 , 包括 技术 上 (托管 服务 ) 和 法 律 上 ( 授 
权 许 可 ) 的 一 些 问题 。 它 们 都 提供 了 可 以 选择 字体 的 大 型 字体 库 , 但 有 时 如 果 你 需要 某 些 特定 字 
体 ， 可 能 需要 开通 特定 服务 才 可 以 使 用 。 

谷歌 字体 有 很 多 高 质量 并 有 旦 开源 的 字体 ( 还 免费 ), 我 建议 你 使 用 这 项 服务 来 为 网 页 添加 Web 
字体 。 因 为 谷歌 做 了 大 量 的 工作 , 所 以 添加 字体 非常 简单 。 然 后 我 们 会 深入 研究 它 到 底 是 如 何 工 
作 的 。 

我 们 还 是 使 用 第 12 草 制 作 的 网 页 , 添加 Web 字体 来 改进 设计 。 完 成 后 的 网 页 会 如 图 13-2 所 
示 ， 页 面 的 大 部 分 内 容 使 用 的 是 Roboto 作为 正文 主体 字体 ， 标 题 使 用 的 是 Sansita。 

















Work together, even if you're apart 


| Organize your team conversations into 
threads. Collaborate together on 
documents in real-time. Use face-to-face 
video calls when typing just won't do. 


Read more 


图 13-2 使 用 了 Sansita 和 Roboto 字体 的 页 面 的 一 部 分 


标题 和 正文 分 别 使 用 不 同 的 字体 是 很 常见 的 。 通 常 ， 一 种 字体 是 serif， 另 一 种 是 sans-serif， 
但 示例 中 的 两 种 都 是 sans-serif。 你 也 可 能 会 见 到 有 的 设计 中 标题 和 正文 使 用 了 相同 的 字体 , 但 不 
同 的 字 重 。 








Serif 字母 笔画 末端 的 小 线条 或 者 “ 爪 状 ” 装饰。 包含 Serif 的 字体 就 被 称 为 Serif 
字体 (例如 Times New Roman )。 如 果 没 有 Serif， 那 就 是 sans-serif 字体 (例如 


Helvetica )。 











你 如 果 已 经 学 完了 第 12 章 ， 那 应 该 已 经 做 完了 页 面 上 除了 Web 字体 以 外 的 部 分 (页面 的 
HTML 代码 参见 代码 清单 12-1，CSS 代码 分 布 在 第 12 章 剩 下 的 代码 清单 中 ， 因 此 你 的 页 面 应 该 
已 经 按 这 些 代码 演 染 好 了 )。 下 面 我 们 来 添加 Web 字体 。 


13.2 合 歌 子 体 
访问 谷歌 字体 网 站 , 就 可 以 看 到 谷歌 字体 中 可 以 使 用 的 字体 目录 。 网 站 使 用 文字 栏 的 网 格 来 


展示 这 些 字 体 ( 如 图 13-3 所 示 )。 你 可 以 直接 从 网 页 上 选择 字体 ， 也 可 以 点 击 右 上 和 角 的 放大 镜 来 
搜索 特定 字体 。 
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Google Fonts DIRECTORY “FEATURED ABOUT 全 QQ 

Be Robertson (12 styles) © baie (1 style) © 5 (8 styles) © 

All their equipment and A red flair silhouetted | watched the storm, so 

instruments are alive. theJagged edge of a beautiful yet terrific. 
wing. 

ire (10 styles) © pr (1 style) © rr Dziedzic (10 styles) © 

Almost before we A shining crescent far It was going to be a 


knew it we had left beneath the flying vessel. lonely trip back. 
the ground. 


图 13-3 ”谷歌 字体 的 字体 选择 界面 


对 于 想 要 使 用 的 了 字体， 点 击 红色 的 加 号 图 标 , 谷歌 就 会 将 其 添加 至 已 选择 字体 ， 罗 列 到 右 下 
方 的 抽 慑 里 (如 图 13-4 所 示 )。 扣 击 红色 的 减 号 图 标 束 可 以 移 除 字体 。 


Families Selected 四 


Your Selection Clear All 六 晤 


Sansita OO Roboto OO 
EMBED CUSTOMIZE Load Time Fast | 


Embed Font 








To embed your selected fonts into a webpage, copy this code into the <head> of your 
HTML document. 


STANDARD @IMPORT 
<link href="https://fonts.googleapis.com/css?family=Roboto|Sansita" rel 


="stylesheet"> 


Specify in CSS 


Use the following CSS rules to specify these families: 


font-family: 'Roboto', sans-serif; 
font-family: 'Sansita', sans-serif; 


For examples of how fonts can be added to webpages, see the getting started guide. 


图 13-4 抽 屠 中 展示 当前 已 选择 字体 ， 并 附带 示例 代码 片段 
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如 果 你 知道 自己 需要 的 字体 是 什么 就 可 以 通过 名 字 搜 索 字体 。 在 搜索 亲 单 中 输入 Sansita， 
主 区 域 里 的 其 他 字体 板块 就 补 过 滤 挥 了 。 点 击 加 号 图 标 ， 把 它 添加 到 已 选择 字体 。 然 后 在 搜索 框 
里 删除 Sansita 并 输入 Roboto, 谷歌 会 找到 几 球 相关 的 字体 ， 其 中 包括 Roboto、Roboto Condensed、 
Roboto Slab 等 。 把 Roboto 添加 到 已 选择 字体 。 

如 果 你 打开 已 选择 的 字体 抽 敢 ， 里 面 会 显示 Sansita 和 Roboto， 还 附带 一 些 HTML (在 网 页 
中 藤 入 字体 ) 和 CSS (在 样式 中 使 用 字体 ) 的 代码 片段 。 在 使 用 这 些 代 码 片 段 之 前 ， 你 还 需要 修 
改 一 下 字体 ， 挑 选 适合 网 页 的 字 重 。 点 击 自 定义 标签 查看 可 选项 〈 如 图 13-5 所 示 )。 























Families Selected 有 


EMBED CUSTOMIZE Load Time {Fast ) 





国 regular 400 


[_ regular 400 ltalic 
[| medium 500 

|] medium 500 ltalic 
[_ | bold 700 

[_ | bold 700 ttalic 
[_ | black 900 


[ black 900 ltalic 
图 13-5 选择 为 网 页 引入 哪 种 字 重 和 字体 样式 


你 可 能 习惯 于 使 用 常规 和 粗 体 ， 但 有 些 字 型 设计 成 多 种 不 同 的 字 重 。 比 如 ，Roboto 有 六 种 13 
不 同 的 字 重 ,范围 从 纤细 ( thin ) 到 特 粗 (black )， 同 时 每 种 字 型 还 有 对 应 的 斜体 格式 。 勾 选 想 
要 下 载 的 字体 旁边 的 复 选 框 。 


说 明 ” 字 型 ( typeface ) 和 字体 ( font ) 这 两 个 术语 经 常 被 混为一谈 。 字 型 通常 是 指 字 
体 ( 比如 Roboto ) 的 整个 家 族 ， 一般 由 同一 个 设计 师 创 造 。 一 种 字 型 可 能 会 存在 多 种 
变 体 和 字 重 ( 比如 细 体 、 粗 体 、 斜 体 、 压 缩 ， 等 等 )， 这 些 变 体 的 每 一 种 可 称 之 为 一 种 
字体 (font )。 
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理想 情况 下 ,你 可 以 下 载 所 有 的 字体 变 体 ， 这样 在 设计 网 页 时 就 会 有 充足 的 选择 。 但 当 开 始 
勾 选 复 选 框 时 ， 你 会 发 现 加 载 时 间 (Load Time ) 指示 妖 ( 在 右上 方 ) 从 “快速 ” 变 成 “适中 ”， 
再 变 成 “ 绥 慢 ”。 选 择 的 字体 越 多 ， 浏 览 磊 需要 下 载 的 就 越 多 。Web 字体 是 拖 慢 网 页 加 载 时 间 最 
大 的 几 个 元 节 之 一 ， 仅 排 在 图 片 之 后 。 因 此 应 该 说 惯 一些 ， 只 挑选 自己 需要 的 字体 。 

在 Roboto 下 选择 细 体 300， 在 Sansita 下 选择 超 粗 800， 这 是 你 将 用 在 示例 中 的 两 种 字 重 。 
正文 中 可 能 经 党 需要 用 到 斜体 版 本 , 但 不 用 提前 准备 , 等 到 确定 网 站 需要 时 再 下 载 。 点 击 “ 般 入 ” 
(Embed ) 选项 卡 返回 到 代码 请 段 ， 你 会 发 现代 但 已 经 更 新 到 选择 的 指定 字 重 了 。 

如 代码 清单 13-1 所 示 , 复制 <1ink> 标 签 并 添加 到 页 面 的 <head> 里 , 这 样 就 为 页 面 添 加 了 一 
个 包含 字体 描述 的 样式 表 。 这 时 页 面 上 一 共有 两 个 样式 表 : 上 自己 原来 的 样式 表 和 字体 样式 表 。 


代码 清单 13-1 ”<link> 标 签 里 面 是 包含 谷歌 字体 的 样式 表 
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Sansita:800" 
rel="stylesheet"> 


谷歌 通过 样式 表 为 页 面 配 置 好 了 Web 字体 需要 的 设置 ， 然 后 就 可 以 在 自己 的 样式 表 中 随意 
使 用 Web 字体 了 。 添 加 Web 字体 之 后 的 页 面 效 果 如 图 13-6 所 示 。 


Features Pricing Support 


ES 


加 





Team collaboration done right 


Get started 





Work together, even if you're apart Take it with you Priced right 

Organize your team conversations into Ink is available on a wide array of devices, Whether you work on ateam of three or a 
threads. Collaborate together on So you can work from anywhere: three hundred, you'l| find our tiered pricing 
documents in real-time. Use face-to-face reasonable at every level. 


video calls when typing just wont do. Web ios Android WindowsPhone 


Read more 
Read more Read more 


图 13-6 使 用 了 Roboto 和 Sansita 字体 的 页 面 


需要 使 用 font -family 属性 来 指定 Roboto 或 者 Sansita ,才能 使 用 字体 。 我 们 更 新 一 下 CSS。 
在 <body> 标 签 中 为 正文 字体 设置 Roboto， 整 个 网 页 会 继承 使 用 。 然 后 为 标题 和 左上 角 的 Ink 首 
页 链接 设置 Sansita 字体 。 把 样式 表 中 的 相应 部 分 改 成 代码 清单 13-2 中 的 代码 。 
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代码 清单 13-2 使 用 Web 字体 


body { 
margin: 0; 对 页 面 全 局 应 用 
font-family: Roboto, sans-serif; Roboto 字体 
line-height: 1.4; 
background-color: var(--extra-light-gray); 

. 

hi, hn2, h3, nh4 { 设置 标题 为 
font=ftamily: Sansica, Serifs Sansita 字体 


y 
a 


.home-link { 
Color: var(--text-color)， 
font-size: 1.6rem; 


设置 首页 链接 为 
font-family: Sansita, serif;, Sansita 字体 
font-weight: bold; 
text-decoration: none; 


J 


因为 页 面 中 添加 了 谷歌 字体 样式 表 ， 所 以 浏览 妖 可 以 理解 这 些 字 体 名 称 指 癌 下 载 的 Web 字 
体 ， 并 将 其 应 用 到 页 面 。 如 果 你 使 用 其 他 的 Web 字体 服务 ( 比如 Typekit )， 那么 整个 过 程 也 是 大 
同 小 异 。 这 些 服务 要 人 么 提供 所 需 的 CSS URL 地 址 ， 要 么 提供 可 以 为 网 页 添加 CSS 的 JavaScript 
i 

接 下 来 我 们 将 稍微 调整 字体 的 间距 ， 并 分 享 一 些 关 于 加 载 性 能 的 考量 因素 。 在 这 之 前 ,我 们 
先 来 看 看 谷歌 字体 做 了 什么 。 
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提供 字体 服务 的 网 站 把 添加 字体 的 工作 做 得 如 此 简单 易 用 , 但 我 们 依然 需要 了 解 一 下 它们 是 
怎么 实现 的 ,和 完 来 看 看 谷歌 提供 的 CSS 文 件 , 在 浏览 妖 中 打开 URL https://fonts.googleapis.com/css? 
family=Roboto:300|Sansita:800, 就 可 以 看 到 谷歌 的 CSS。 我 们 复制 其 中 的 一 部 分 , 如 代码 清单 13-3 
所 未 。 


代码 清单 13-3 ”谷歌 的 字体 定义 样式 表 


每 条 efont-face 规则 











定义 一 个 字体 , 可 以 在 页 设置 这 条 efont -face 
ee 规则 使 用 的 字体 样式 和 
, 字 重 
A* ~ LatLn *y 则 声明 字体 
Qfont-face { 名 称 
font-family: ' Roboto ' ; 


font-style: normal; 
font-weight: 300; 
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src: local('Roboto Light'), local('Roboto-Light'), 可 以 找到 字体 
url(https://fonts.gstatic.com/s/roboto/vi5/Hgo13k- 文件 的 位 置 
tfSpnOgqilSFAdUfZBwl1lxUlrKptJ]J_0jans920 .woff2) format ('woff2').; 





Unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, 
U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 





} 
这 条 @font-face 规则 使 用 


和 的 Unicode 编码 范围 
Qfont-face { 
font-family: 'Sansita'; 


font-stylje: normal; 

font-weight: 800; 

src: local('Sansita ExtraBold'), local('Sansita-ExtraBold'), 
url(https://fonts.gstatic.com/s/sansita/vli/MOVOVsEPZWhxh- 
yeRPOtpPOzZyDMXhdD8sAJ60AJTFSBI.woff2) format ('woff2'); 

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, 
U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 

















} 


@font-face 规则 定义 了 浏览 融 字 体 , 以 便 在 页 面 的 CSS 中 使 用 。 这 里 的 第 一 条 规则 实际 上 
是 说 , “如 果 页 面 需 要 演 染 font-fami ly 为 Roboto 的 拉丁 字符 ，j 这 些 字 符 使 用 了 正常 的 字体 样 
式 ( 非 斜体 ) 并 且 字 重 为 300， 那 么 就 使 用 这 个 字体 文件 ”。 第 二 条 规则 类 似 ， 定义 了 一 个 粗 体 
版 本 ( 字 重 为 800 ) 的 Sansita 字体 。 

font-family 设置 了 引用 字体 的 名 称 ， 可 以 在 样式 表 的 其 他 地 方 使 用 。src :提供 了 一 个 去 

了 分隔 的 浏览 圳 可 以 搜索 的 地 址 列表 ， 以 local (Roboto TOht) ) 和 local (Roboto- IC 
开头 , 这 样 的 话 , 如 果 用 户 的 操作 系统 中 恰好 安装 了 名 为 Roboto Light 或 者 Roboto-Light 的 字体 ， 
就 使 用 这 些 字 体 。 否 则 ， 就 下 载 使 用 url () 指定 的 woff2 字体 文件 。 


说 明 ”谷歌 提供 的 字体 文件 也 包含 其 他 字符 集 的 类 似 代码 ， 比 如 西里 尔 字 有 母 、 希 腊 语 和 


越南 语 。 这 些 字 符 集 放 在 其 他 的 字体 文件 中 ， 如 果 没 有 用 到 ， 浏 览 器 就 不 会 下 载 它们 。 
同样 ， 我 们 这 里 为 了 简单 起 见 ， 省 略 了 这 部 分 











13.3.1 字体 格式 与 回 退 处 理 


谷歌 的 样式 表 假 设 浏览 需 文 持 WOFF2 格式 的 字体 文件 。 这 是 可 以 的 ， 因 为 谷歌 通过 检查 浏 
览 絮 的 用 户 代 理 字 符 串 , 能 够 判断 出 我 的 浏览 絮 ( Chrome ) 支持 这 些 字 体 文件 。 如 果 我 们 在 IE10 
浏览 需 中 访问 相同 的 URL， 返 回 的 样式 表 稍 有 不 同 ， 其 中 会 使 用 WOFF 字体 。 

WOFF 是 指 Web 开放 字体 格式 ， 这 是 一 种 专 为 网 络 使 用 而 设计 的 压缩 字体 格式 。 所 有 的 现 
代 浏 览 器 都 支持 WOFF, 但 不 是 所 有 的 都 支持 WOFF2 ( WOFF2 格式 有 更 好 的 压缩 效果 ， 因 此 文 
件 更 小 )。 你 应 该 不 希望 像 谷 歌 那 样 ， 每 次 都 去 判断 用 户 代 理 字 符 串 。 代 码 清单 13-4 展示 了 一 种 
稳健 的 解决 方案 ， 同 时 提供 WOFF 和 WOFF2 字体 文件 的 URL ( 为 了 使 代码 更 易 读 ， 这 里 使 用 
了 简写 的 URL )。 
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代码 清单 13-4 WOFF2 Web 字体 声明 ， 附 带 回 退 为 WOFF 


Qfont-face { 
font-family: "Roboto",; 





font-style: normal; 
font-weight: 300; 使 用 列表 中 支持 
src: local ("Roboto Light"), local ("Roboto-Light"), 的 第 一 种 格式 
url(https://example.com/roboto.woff2) format ('woff2°'), 
url (https://example.com/roboto.woff) format ('woff').; 
} WOFF2 的 浏览 
退 为 WOFF 





Web 字体 刚刚 兴起 的 时 候 ， pe 因为 每 款 浏 览 器 支持 的 
格式 都 不 一 样 。 现 在 绝 大 部 分 浏览 器 已 经 支持 WOFF， 因 为 WOFF2 加 载 更 快 ， 一 般 会 提供 这 两 
种 字体 的 URL。 

13.3.2 同一 种 字 型 的 多 种 变 体 
如 果 需 要 用 到 同一 种 字 型 的 多 种 字体 , 那么 每 一 种 字体 都 需要 目 己 的 efont-face 如 

















果 你 在 谷歌 字体 页 面 上 同时 选择 了 Roboto 的 细 体 和 粗 体 版 本 ， 谷 歌 就 会 提供 一 个 类 似 于 
ee 700 的 样式 表 URL。 在 浏 人 URL 并 碍 
看 代码 ， 这 里 我 们 复制 了 一 部 分 ， 如 代码 清单 13-5 所 示 。 


代码 清单 13-5 ”定义 同一 种 字 型 的 两 种 不 同学 重 
ZL* Tatiy < 
Qfont-face { 
font-family: 'Roboto'; 


font-style: normal; 细 体 Roboto 
font-weight: 300; 
src: local('Roboto Light'), local('Roboto-Light'), 


url(https://fonts.gstatic.com/s/roboto/vi5/Hgo13k- 
tfSpnO0gqilSFdUfZBwlxUlrKptJJ]_0jans920 .woff2) format ('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, 
U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 





; 


/* latin */ 
Qfont-face { 
font-family: ' Roboto ' ; 


font-style: normal; 粗 体 Roboto 
font-weight: 700; 
src: local('Roboto Bold'), local('Roboto-Bold'), 


url(https://fonts.gstatic.com/s/roboto/vi5/d- 
6IYPI1OFOCCacKzZzxwXSOJBW1xUlrKptJJ]_0jans920 .woff2) format ('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, 
U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 





} 


代码 清单 13-5 展示 了 Roboto 字 体 的 两 种 不 同 的 定义 。 如 果 页 面 上 需要 演 染 字 重 为 300 的 Roboto， 
就 使 用 第 一 种 定义 ; 如 果 需 要 演 染 字 重 为 700 的 Roboto， 就 使 用 第 二 




















296 第 13 间 排版 


如 果 页 面 样式 需 半 要 用 到 : 其 他 版 本 的 字体 ( 比如 font-weight: 500 或 者 font-style: 
italic ), 浏览 带 就 会 从 提供 的 两 种 字体 中 选择 更 接近 的 字体 。 不 过 这 取决 于 浏览 右 ， 它 可 能 会 
把 某 个 已 提供 字体 倾 冬 或 者 加 粗 来 达到 想 要 的 效 采 ,通过 使 用 几何 学 的 方法 来 实现 字母 形状 的 转 
换 。 因 为 这 样 的 字体 显示 肯定 不 如 原生 设计 的 效果 好 ， 所 以 不 建议 依靠 这 种 方式 。 

在 你 使 用 合 胃 歌 字体 或 者 其 他 学 体 服务 提供 商 时 ， 通过 界面 操作 就 可 以 获得 所 需 的 代码 。 有 时 

可 能 服务 商 没 有 提供 你 要 使 用 的 字体 ， 这 种 情况 下 就 需要 上 自己 提供 字体 服务 ， 使 用 efont-face 
规则 定义 浏览 各 所 需 的 格式 。 


13.4 ”调整 字 距 ， 提 升 可 读 性 


我 们 回 到 页 面 上 。 Web OR 我 们 按照 设计 稿 再 调整 一 下 。 这 里 涉及 两 个 属 
性 : line-height 和 1letter-spacing， 这 两 个 属性 可 以 控制 文本 行 之 间 的 距离 (垂直 方向 ) 
和 他 符 之 间 的 距离 (水 平方 同 )。 

很 多 开发 者 往往 不 太 看 重 这 两 个 属性 。 如 来 在 网 页 实现 的 时 候 多 花 点 儿 时 间 调 整 它们 , 可 能 
会 使 整个 网 站 的 效果 产生 很 大 的 改进 。 除 此 之 外 , 还 可 以 让 用 户 在 阅读 的 时 候 体 验 更 好 , 增加 用 
户 医 性 

如 果 文 学 间距 太 紧 浴 ， 阅 读 更 多 句子 或 者 词语 就 会 比较 费 幼 ,间距 太 大 也 会 有 同样 的 问题 。 
图 13-7 展示 了 多 种 不 同 间距 的 文本 。 















































TheDogand the shadow The Dog and the Shadow 

lt happened that a Dog had got a piece of meat and was carrying it | 

home in his mouth to eat it in peace. Now on his way home he had lt happened that a Dog had got a piece of meat and was 

to cross a poh ok, across a running brook. As he crossed, he carrying it home in his mouth to eat it in peace. Now on his 
looked down and saw his own shadow reflected in the water : 
beneath. way home he had to cross a plank lying across a running 


brook. As he crossed, he looked down and saw his own 


Thinking it was another dog with another piece of meat he made ; 
up his mind to have that also. So he made a snap at the shadow in shadow reflected in the water beneath. 
the water, but as he opened his mouth the piece of meat fell out, . . 
dropped into the water and was never seen more. Thinking it was another dog with another piece of meat, he 

made up his mind to have that also. So he made a snap at the 
shadow in the water, but as he opened his mouth the piece of 


meat fell out, dropped into the water and was never seen more. 


Beware lest you lose the substance by grasping at the shadow. 


Beware lest you lose the substance by grasping at the shadow. 


The Dog and the Shadow 


It happened that a Dog had got a piece of meat and 
was carrying it home in his mouth to eat it in peace. 
Now on his way home he had to cross a plank lying 
across a running brook. As he crossed, he looked 
down and saw his own shadow reflected in the water 
beneath. 


Thinking it was another dog with another piece of 
meat, he made up his mind to have that also. So he 
made a snap at the shadow in the water, but as he 
opened his mouth the piece of meat fell out, 
dropped into the water and was never seen more. 


Beware lest you lose the substance by grasping at 





the shadow. 

















图 13-7 文字 间距 对 阅读 体验 有 明显 的 影响 
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试 春 该 一 下 左上 方 的 压缩 版 文字 , 你 会 发 现 需 要 更 集中 注意 力 才 行 。 可 能 不 小 心 就 漏 了 一 行 ， 
或 者 同一 行 读 两 次 ,很 快 就 不 想 读 下 去 了 了。 这样 的 页 面 显 得 比较 拥挤 ,没有 条 理 。 左 下 方 的 文字 
有 点 太 分 散 了 , 这 样 每 个 字母 就 会 占 去 太 多 注意 力 , 不 容易 在 大 脑 里 组 合成 单词 。 相 比 之 下 , 碳 
上 方 的 文字 比较 舒服 ， 看 上 去 “刚刚 好 ”， 是 这 三 个 里 面 最 容易 阅读 的 。 














13.4.1 ”正文 主体 的 字 间 距 


为 line-height 和 letter-spacing 找到 合适 的 值 是 件 主 观 性 很 强 的 事情 。 最 好 的 解决 
办 法 通常 是 多 试 几 个 值 ， 如 果 两 个 值 要 么 太 紧 竣 要 么 太 松散 ， 那 就 取 它 们 的 中 间 值 。 苹 运 的 是 ， 
下 面 介绍 的 这 些 经 验 法 则 可 以 为 你 提供 帮助 。 

line-height 属性 的 初始 值 是 关键 字 normal， 大 约 等 于 1.2( 确切 的 数值 是 在 字体 文件 中 
编码 的 ， 取 决 于 字体 的 em 大 小 )， 但 是 在 大 部 分 情况 下 ， 这 个 值 太 小 了 。 对 于 正文 主体 来 说 ， 
介 于 1.4 和 1.6 之 间 的 值 比较 理想 。 

我 们 已 经 在 上 一 草 为 <boqy> 设 置 了 1.4 的 行 高, 这 个 值 会 被 页 面 里 其 他 的 元 素 继承 。 看 看 是 
不 是 把 这 个 设置 弄 丢 了 。 图 13-8 展示 了 其 中 一 个 板块 。 其 中 左边 的 这 个 ，1line-height 和 
letter-spacing 都 使 用 初始 值 ， 右 边 的 是 调整 过 的 (我们 的 目标 是 把 网 页 调整 成 右 侧 板块 的 
字 距 )。 








Work together, even if you're apart Work together, even if you're apart 


Organize your team conversations into Organize your team conversations into 
threads. Collaborate together on threads. Collaborate together on 
documents in real-time. Use face-to-face ” 1 

documents in real-time. Use face-to-face 


video calls when typing just wont do. 
i video calls when typing just won't do. 


Read more 
Read more 








图 13-8 Ink 页 面 的 一 个 板块 ， 一 个 使 用 原始 字 距 ( 左 )， 另 一 个 是 最 终 调整 值 ( 右 ) 
把 1ine-height 的 值 改 成 1.3 或 者 1.5， 看 看 效果 如 何 ， 是 否 比 之 前 的 1.4 好 一 些 。 


提示 文字 行 越 长 ， 行 高 应 该 设置 得 越 大 。 这 样 读者 的 眼睛 扫 到 下 一 行 的 时 候 才 更 容 匈 ， 
不 会 注意 力 分 散 。 理 想 情况 下 ， 每 行文 字 的 长 度 应 该 控制 在 45~75 个 字符 ， 一般 认为 
这 样 的 长 度 最 利于 阅读 。 


接 下 来 ， 我 们 看 看 letter-spacing。 这 个 属性 需要 一 个 长 度 值 ， 用 来 设置 每 个 字符 之 间 
的 距离 。 即 使 只 设置 1px， 也 是 很 夸张 的 字 间 距 了 ， 因 此 这 应 该 是 个 很 小 的 长 度 值 。 我 在 尝试 找 
到 合适 值 的 时 候 ， 一 般 每 次 只 增加 lem 的 1100 (例如 ，letter-spacing: 0.01em )。 把 代码 
清单 13-6 添加 到 CSS 中 。 
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代码 清单 13-6 ”在 body 元 素 上 设置 字符 间距 


body { 

margin: 0; 行 高 和 字 距 会 被 页 

ferme tanilos RODSOeo,. Canssyetie 面 上 所 有 元 素 继承 
line-height: 1.4; 


letter-spacing: 0.01em; 


. 为 字符 之 间 添 加 0.01em 
background-color: var(--extra-light-gray); 的 额外 间距 
} ~ 








把 字符 间距 增加 到 0.02em 或 者 0.03em， 看 看 效果 如 何 。 你 可 能 不 具备 设计 师 的 专业 眼光 ， 
没 办 法 确定 哪 种 效果 最 佳 , 但 是 没关系 ， 凭 直觉 就 好 。 如 果 还 是 有 疑虑 ， 那 就 保守 一 点 不 要 设置 
太 大 。 我 们 的 目的 不 是 要 吸引 用 户 注 意 字 符 间 距 , 事实 上 恰恰 相反 ,在 Ink 页 面 上 ,我 发 现 0.01em 
和 0.02em 都 可 以 ， 那 我 们 就 保守 一 点 选择 0.01em。 




















把 行距 和 字 距 转换 成 CSS 

在 设计 领域 ,文本 行 之 间 的 距离 称 为 行距 (leading, 与 bedding 有 点 谐音 )， 来 源 于 印刷 
版 每 行文 字 之 间 添 加 的 一 条 条 的 引导 线 (lead )。 字符 之 间 的 距离 称 之 为 字 距 ( tracking )。 如 果 
你 和 设计 师 一 起 工作 ， 他 们 可 能 会 在 设计 稿 中 指明 行距 和 字 距 ， 但 这 些 值 看 起 来 跟 CSS 属性 
Te elon A etrer So me wR 

行 高 一 般 使 用 “点 ” 作 单 位 来 描述 ， 比 如 18pt, 代表 的 是 一 行文 字 的 高 度 加 上 它 与 下 一 行 
文字 之 间 的 距离 。 这 实际 上 与 CSS 的 1]ine-height 一 样 , 但 是 没有 使 用 一 个 无 单位 的 数字 来 
表达 。 你 必须 首先 把 它 转 化 为 跟 字 体 一 样 使 用 像素 单位 ， 然 后 再 计算 出 无 单位 数字 。 

把 点 值 乘 以 1.333， 就 可 以 把 pt 转化 为 px (因为 每 英寸 是 96px， 并 且 每 英寸 等 于 72pt， 
96/72=1.333 )， 即 18ptx1.333=24px。 然 后 除 以 字号 ， 得 到 无 单位 的 行 高 值 ， 即 24px/16px=1.5。 

字 距 通常 会 给 定 一 个 字数 ,比如 100。 因为 这 个 数字 表示 lem 的 千 分 之 一 , 所 以 除 以 1000 
就 可 以 转化 成 em 单位， 即 100/1000=0.1em。 


13.4.2” 标题、 小 元 素 和 间距 


标题 的 间距 通常 和 正文 主体 不 太一 样 。 调 整 完 主 体 间 距 设 置 以 后 , 检查 一 下 标题 ,看 看 是 否 
需要 调整 。 

标题 一 般 比 较 短 ,通常 只 有 几 个 字 , 但 有 时 候 也 会 出 现 比 较 长 的 标题 。 设 计 的 时 候 和 常 犯 的 错 
误 就 是 只 测试 短 标题 。 现 在 页 面 的 行 高 设置 好 了 , 可 以 试 着 为 各 个 标题 添加 额外 的 文字 强制 换行 
看 看 效果 ( 如 图 13-9 所 示 )。 








/ 
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第 eam collaboration done right Team collaboration done 
| right Team collaboration done right 


Get started 


Work together, even if you're apart Take it with you Priced right 
Work together, even if you're apart 

Ink is available on a wide array of Whether you work on a tea 
Organize your team conversations into devices, So you can work from anywhere: a three hundred, you'l| find 


图 13-9 ”强制 标题 换行 ， 确 保 行 高 是 合适 的 


实际 页 面 中 ， 因 为 慌 直 间距 看 上 去 还 可 以 ， 所 以 就 不 再 修改 了 ,但 一 定 要 记得 检查 一 遍 。 有 
时 候 1.4 的 行 高 可 能 显得 有 点 大 ， 这 也 取决 于 字 型 ， 特 别 是 设置 大 字号 的 时 候 。 我 曾经 在 一 些 网 
站 上 把 行 高 调 低 到 1.0。 

相对 来 讲 ， 字 符 间 距 反 而 可 以 设置 得 稍 宽 一 些 。 把 代码 清单 13-7 中 的 代码 添加 到 样式 表 ， 
其 中 学 符 间 距 做 了 一 些小 调整 。 


代码 清单 13-7 ”增加 标题 字 间 路 
hli, h2, h3, h4 f{ 
font-family: Sansita, serif; 
letter-spacing: 0.03em; 


} 








J we 
.home-link { 增加 标题 
字符 间距 


Color: var(--text-color); 





font-size: 1.6rem; 
font-family: Sansita, serif; 
font-weight: bold; 
letter-spacing: 0.03em; 
text-decoration: none; 


} 

对 于 正文 主体 来 讲 , 调整 间距 是 为 了 使 阅读 体验 效 采 更 佳 , 但 对 于 标题 和 其 他 内 容 很 少 的 元 素 
(比如 按钮 ) 来 讨 ， 影 响 不 大 。 这 时 候 间 距 可 调整 匈 围 大 大 增加 ， 就 可 以 多 多 发 挥 创意 了 。 也 可 以 
使 用 人 负数 设置 字符 间距 ， 让 字符 更 紧凑 。 狠 13-10 里 的 标语 设置 了 letter-spacing: -0.02em。 
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Team collaboration done right 


\ 


图 13-10 页 面 上 内 容 简 短 、 风 格 鲜明 的 部 分 ， 可 以 考虑 使 用 更 紧凑 的 字符 间距 


间距 变化 还 是 很 明显 的 。 如 宁 是 几 段 文字 产生 这 样 的 间距 变化 ,可 能 就 会 变 得 难以 阅读 , 但 
对 于 小 段 文 本 效果 还 可 以 ( 只 有 几 个 字 ) 我 们 对 标语 文字 使 用 这 样 的 效果 ， 将 代码 清单 13-8 添 
加 到 样式 表 中 。 


代码 清单 13-8 ” 收 紧 标语 的 字 间 距 











.hero h2 { 
font-size: 1.95rem; 使 用 负 值 的 letter-spacing 
letter-spacing: -0.02em; 来 压缩 字符 间距 


margin-top: 0; 
margin-bottom: 0.625rem; 


} 

我 们 也 可 以 重新 评估 一 下 页 面 上 小 元 系 的 间距 和 了 文本， 比如 按钮 。 我 认为 现在 的 按钮 看 厦 有 
太太 大 了 ， 特别 是 头 部 的 导航 按钮 。 我 们 来 调整 一 下 。 图 13-11 展示 了 现在 的 效 末 (上 ) 和 调整 
后 的 效 来 (下 )。 
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图 13-11 调整 文本 属性 可 以 改善 导 币 按钮 的 外 观 (下 ) 











这 里 做 了 如 下 调整 : 减 小 字号 ,使 用 text-transform 把 字母 改 成 大 写 ， 调 大 字符 间距 。 
提示 “全 部 使 用 大 写字 母 的 文字 ， 调 大 字符 间距 看 上 去 更 好 一 些 。 


把 代码 清单 13-9 中 的 声明 添加 到 样式 表 。 页 面 上 其 他 的 按钮 同样 使 用 了 缩减 的 字号 ， 会 变 
得 稍 小 一 些 ， 但 对 于 导航 链接 来 讲 ， 只 需 改 成 大 写 和 调整 字符 间距 即 可 。 


代码 清单 13-9 调整 nav 且 单 元 末 的 大 小 和 间距 
.nav-container jinner { 


display: flex; 把 导航 容器 中 的 元 








Justify-content: space-between; 素 对 齐 到 底部 
align-items: flex-end; 

max-width: 1080px; 

margin: 0 auto; 

padding: 0.625em 0; 
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减 小 导航 链接 和 按 
Ve Ba 钮 的 字号 


.top-nav a { 
display: block; 


font-size: 0.8rem; 把 内 边 距 值 从 em 
padding: 0.3rem 1.25rem; 换 成 rem 

Color: var(--white).; 

background: var(--brand-green); 


text-decoration: none; 

border-radius: 3px; 

text-transform: uppercase; | 把 导航 链接 改 成 大 写 
并 增加 字符 间距 


letter-spacing: 0.03em; 
} 
DER { 
display: inline-block; 
padding: 0.4em lem; 
color: hsl(162, 87%, 21%); 
border: 2px solid hsl(162, 87%, 21%); 
border-radius: 0.2em; 
text-decoration: none; 减 小 导航 链接 和 
font-size: 0.8rem; 按钮 的 字号 
} 
因为 减 小 了 导航 链接 的 字号 , 所 以 它们 将 不 再 填充 nav-container 内 容 盒子 的 高 度 。 默认 
情况 下 这 些 链接 是 顶部 对 齐 的 , 下 方 留 出 一 些 区 域 , 将 nav-container 的 弹性 子 元 素 对 齐 到 底 
部 ( flex-engd )， 就 可 以 解决 这 个 问题 。 
因为 导航 元 条 的 字号 已 经 改变 了 ， 所 以 它们 的 内 边 距 (之 前 以 em 为 单位 来 设置 ) 也 会 随 之 
改变 。 为 了 避免 这 样 ， 我 在 这 里 把 单位 改 成 rem。 当 然 也 可 以 通过 数学 计算 得 出 新 的 以 em 为 单 
位 的 相应 但， 但 是 这 样 做 并 不 值得 。 
cext-ttansform 属 性 对 你 来 说 可 能 有 点 陌生 。 它 可 以 把 所 有 字母 改 成 大 写 ， 不 管 HTML 原 
台 文本 如 何 书写 。 这 里 强烈 推荐 使 用 这 种 方式 ， 而 不 是 去 HTML 里 直接 把 文本 改 成 大 写 。 原 因 在 
于 通过 这 种 方式 ， 如 果 将 来 设计 稿 修 改 了 ， 就 可 以 只 改 一 行 CSS， 而 不 必修 改 所 有 HTML 页 面 的 
多 个 地 方 。 如 果 是 需要 遵循 某 种 语法 规则 的 大 写 ( 比如 首 字母 缩 略 词 ”)， 就 需要 修改 HTML 的 内 
容 了 。 像 这 种 只 是 单纯 地 出 于 设计 上 的 考虑 ， 只 使 用 CSS 就 可 以 实现 。 
lowercase 是 text-transform 属性 的 另 一 个 值 ， 表示 把 所 有 字母 都 小 写 。 还 可 以 设置 为 
capitalize， 这 样 只 把 每 个 单词 的 首 字母 大 写 ， 其 余 字 母 保 持 HTML 里 的 原始 状态 。 


















































更 加 深入 : 垂直 规律 
第 12 章 讨 论 了 在 设计 中 贯彻 始终 如 一 的 模式 的 重要 性 ， 其 中 也 包括 屏幕 上 元 素 间距 的 始 
终 如 一 。 垂 直 规 律 〈vertical rhythm ) 就 是 针对 整个 页 面 所 有 文本 行 应 用 这 一 原则 的 实践 方式 。 
这 是 通过 设置 基线 网 格 (baseline grid ) 来 实现 的 ， 基 线 网 格 是 指 文 本 行 之 间 重 复 等 距离 的 标 


Q 首 字母 缩 略 词 (acronym )， 比 如 HIML 是 由 HyperText Markup Language 的 首 字母 缩 略 而 成 。 一 一 译 者 注 
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线 。 页 面 上 大 部 分 甚至 全 部 的 文本 应 该 参考 基线 网 格 米 对 齐 。 
这 张 图 中 使 用 了 等 距离 水 平 线 标注 了 基线 网 格 , 注意 标题 、 正 文 文本 和 按钮 文本 是 如 何 对 
齐 到 网 格 的 。 


Work together, even if you're apart 


Organize your team conversations into 
threads. Collaborate together on 
documents in real-time. Use face-to-face 
video calls when typing just wont do. 


Read more 


使 用 各 种 规格 的 文本 和 外 间距 的 元 素 ， 却 遵守 一 致 的 重 直 方向 上 的 规律 ， 即 基线 网 格 

在 网 站 中 引入 这 种 设计 原则 无 疑 会 增加 很 多 工作 量 ， 但 回报 你 的 是 更 加 精细 的 一 致 性 。 
如 果 你 追求 细节 ， 打 算 自 己 尝试 一 下 ， 建 议 你 读 一 读 文章 Why is Vertical Rhythm an Important 
Typography Practice?, 

再 提醒 一 名 ,创建 重 直 规律 一 般 需 要 在 1ine-height 声明 中 使 用 单位 。 因 为 这 样 会 改变 
行 高 值 被 继承 的 方式 ( 参见 第 2 章 )， 所 以 你 必须 确保 在 页 面 上 所 有 字号 改变 的 地 方 都 明确 设 
置 合适 的 行 高 。 


13.5 恼人 的 FOUT 和 FOIT 


在 处 理 字体 前 ， 需 要 先 考 虑 一 下 性 能 ， 因 为 字体 文件 很 大 。 我 在 前 面 提 到 过 ， 页 面 使 用 的 字 
体 文件 数量 应 该 精简 到 最 少 ， 但 即使 这 样 ， 仍 然 可 能 存在 问题 。 浏 览 硕 中 经 汕 会 遇 到 这 种 情况 ， 
页 面 的 内 容 和 布局 就 要 开始 渲染 了， 字体 却 还 在 下 载 中 。 有 必要 来 思考 一 下 这 时 候 会 发 生 什么 。 

开始 时 ， 大 多 数 的 浏览 带 供应 商 为 了 尽 可 能 快 地 泻 染 页 面 ,使 用 了 可 用 的 系统 字体 。 然 后， 
一 小 段 时 间 过 去 了 ，Web 字体 加 载 完成 , 页 面 会 使 用 Web 了 字体 重新 演 染 一 次 。 图 13-12 阐述 了 这 
个 过 程 。 

比 起 系统 字体 ，Web 字体 很 可 能 会 在 屏 厅 上 占据 不 一 样 的 空间 。 第 二 次 演 染 时 ， 页面 布 局 变 
了 ,文学 突然 跳动 了。 如 来 这 是 在 第 一 次 演 染 之 后 很 快 发 生 ， 用 户 可 能 不 会 注意 到 。 但 是 如 打字 
体 下 载 过 程 中 有 网 络 延迟 〈 或 者 字体 文件 太 大 了 )， 可 能 长 达 几 秒 之 后 才 会 再 次 演 染 页 面 。 这 种 
情况 发 生 时 ,有 的 用 户 可 能 会 感到 大 烦 。 他 们 可 能 已 经 开始 阅读 网 页 内 容 了 , 这 时 页 面 突然 变化 ， 
会 让 他 们 注意 力 分 散 。 这 就 是 所 谓 的 FOUT， 即 无 样式 文本 闪 动 (Flash of Unstyled Text )。 
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Take it with you 


Take it with you 
Ink is available on a wide array of 
devices, so you can work from Ink is available on a wide array of 
anywhere: devices, So you can work from anywhere: 
Web iOS Android Windows Phone Web i0OS Android Windows Phone 


Read more Read more 


240ms: 回 退 字体 党 桨 410ms: Web 字 体 深 桨 


图 13-12 FOUT (无 样式 文本 闪 动 ) 





因为 开发 者 们 不 喜欢 这 样 ， 所 以 大 部 分 训 览 硕 供 应 商 修改 了 浏览 大 的 行为 。 他 们 不 再 泻 染 回 
退 字 体 , 改 成 泻 染 页 面 上 除了 文本 以 外 的 其 他 所 有 元 系 。 确 切 地 说 , 他 们 把 文本 泻 染 成 不 可 见 的 ， 
因此 文字 依然 会 占据 页 面 的 空间 。 通 过 这 种 方式 ,页面 的 容 融 元 素 得 以 实现 , 用 户 承 可 以 看 到 页 
面 正 在 加 载 。 这 束 导 至 了 一 个 新 的 问题 ， FOIT， 即 不 可 见 文 本 内 动 (Flash ofInvisible Text )。 如 
图 13-13 所 示 ， 背 景 闫 色 和 边框 都 显示 出 来 了 ,但 是 文学 在 第 二 次 演 染 的 时 候 才 显示 ， 即 Web 
字体 加 载 之 后 。 











Take it with you 


Ink is available on a wide array of 
devices, so you can work from anywhere: 


Web i0OS Android Windows Phone 


王 一 


240ms: 不 可 见 文本 深交 410ms: Web 字 体 演 染 


图 13-13 FOIT (不 可 见 文本 闪 动 ) 





这 种 方案 解决 了 之 前 的 问题 , 但 又 带 来 了 新 问题 。 如 果 Web 字体 加 载 时 间 很 长 会 发 生 什 么 ? 
或 者 加 载 失 败 呢 ?” 页 面 会 一 直 空 白 ， 这 些 彩 色 的 盒子 只 是 空 完 ，, 对 于 用 户 来 讲 完全 没有 意义 。 这 
种 情况 发 生 时 ， 我 们 还 是 希望 使 用 FOUT 时 的 系统 字体 。 

开发 者 针对 这 些 问题 提出 了 很 多 解决 办 法 ， 基 本 上 每 一 年 会 涌现 出 “更 好 ”的 方案 。 要 解决 
问题 , 其 实 就 是 要 避免 发 咎 FOUT 和 FOIT。 然 看 在 Web 字体 领域 , 这 两 个 问题 从 未 完全 解决 过 。 
我 们 能 做 的 就 是 尽 可 能 让 它们 产生 的 影响 降 到 最 低 。 

幸好 关于 这 些 问 题 的 讨论 即将 尘埃 落 定 , 这 里 我 就 不 从 头 介 绍 好 几 种 不 同 的 技巧 了 , 直接 演 
示 我 认为 最 合理 的 解决 方案 。 这 里 需要 用 到 一 点 JavaScript 来 控制 字体 加 载 。 同 时 我 也 会 介绍 一 


























大 大 
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个 即将 新 增 的 CSS 属性 ,不 需要 JavaScript 就 可 以 提供 这 种 控制 。 你 可 以 使 用 任意 一 种 或 者 同时 


使 用 两 种 。 


13.5.1 使 用 Font Face Observer 





使 用 JavaScript 可 以 监控 字体 加 载 事 件 , 这 样 就 可 以 更 好 地 控制 FOUT 与 FOIT 的 发 生 过 程 。 
还 可 以 使 用 js 库 来 帮助 处 理 ， 我 喜欢 用 一 款 名 叫 Font Face Observer 的 库 。 这 个 库 可 以 让 你 等 待 
Web 字体 加 载 ,然后 做 出 相应 的 啊 应 。 我 一 般 是 在 字体 准备 好 时 , 使 用 JavaScript 为 <html> 元 素 








添加 一 个 fonts-loaded 类 。 然 后 就 可 以 使 用 这 个 类 为 页 面 设置 不 同 的 样式 ， 用 不 用 Web 字体 


都 可 以 。 





下 载 一 份 fontfaceobserver.js 文件 ,保存 到 和 页 面相 同 
的 代码 到 页 面 底部 ， 放 在 </body> 闭 合 标 签 之 前 。 


代码 清单 13-10 ”使 用 Font Face Observer 监测 字体 加 载 


<script type="text/javascript"> 

var html document .documentElement,; 

Var script document .createElement ("script").; 
"fontfaceobserver.Js";} 











script.src 
script.async 





= 

script.onload = function 
Var roboto 
Var Sansita 
var timeout 


() { 

= new FontFaceObserver ("Roboto"); 
new FontFaceObserver ("Sansita" 
2000 ， 








Promise.alll(lI 


roboto.load (null, timeout), 





sansita.load (null, timeout) 
]).then(function () { 

html.classList.add("fonts-loaded").,; 
}).catch(function (e) { 

html.classList.add("fonts-failed");} 





}); 
上 上 
document .head.appendChild(script); 
</script> 


的 目录 下 。 然 后 添加 代码 清单 13-10 中 


1 


动态 创建 <sczript> 标 签 ， 添 加 
Font Face Observer 到 页 面 上 


两 种 字体 都 加 载 完 成 以 后 ， 为 <html > 
元 素 沐 加 fonts-loaded 类 


为 Roboto 和 Sansita 


3 字体 创建 观察 器 


- 


如 果 字 体 加 载 失 败 ， 为 <html> 


元 素 添加 fonts-failed 类 


这 段 脚 本 创建 了 两 个 观察 需 , 分 别 用 于 Roboto 字体 和 Sansita 字 体 。 Promise.all() 方 法 会 
等 待 两 个 字体 都 加 载 完 成 ， 然 后 脚本 为 页 面 添加 fonts-loadeg 类 。 如 果 加 载 失 败 ， 或 者 加 载 
超时 ( 超过 两 秒 )，catch 回调 函数 会 被 调用 ,为 页 面 添加 fonts-failed 类 。 这 样 当 页 面 加 和 载 


完成 时 ， 脚 本 会 为 页 面 要 么 添加 fonts-loaded 类 ， 要 入 


添加 下 百 帮 攻 世 三 王 轩 二 个 2 


说 明 这 段 脚 本 和 Font Face Observer 都 使 用 了 JavaScript 的 一 个 名 为 promise 的 特性 ， 


I vo 


但 是 下 浏览 器 


的 独立 版 本 。 


不 支持 这 个 特性 。 人 幸运 的 是 ，Font Face Observer 包含 了 一 个 polyfill 来 添 
加 支持 。 如 果 你 已 经 使 用 了 自己 的 polyfill, 那 就 在 它 人 


] 的 网 站 上 下 载 Font Face Observer 


13.5 恼人 的 EFOUT 和 FOIT 


接 下 来 ,我 们 演示 一 下 如 何 使 用 fonts-loaded 和 fonts-failed 类 来 控制 字体 在 加 载 过 


程 中 的 表现 。 


限制 网 络 来 测试 字体 加 载 行为 
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如 果 你 是 在 高 速 网 络 连 接 条 件 下 开发 , 很 难 测试 到 网 站 的 字体 加 载 行 为 。 有 一 种 解决 方案 


是 在 Chrome 或 者 Firefox 开发 者 工具 中 手动 调 低 下 载 速度 。 


在 Chrome 的 Network 标签 中 ,顶部 条 里 有 个 下 拉 菜 单 ， 预 先 设 置 了 几 种 网 速 。 在 选择 本 


中 选中 Regular 3G (常规 3G )， 就 可 以 手动 设置 低速 网 络 连接 ， 如 下 图 所 示 : 


sg i = 要 
3S 和 Network Timeline Profiles Application Security Audits EditThisCookie 


Preserve log Disable cache Offline Regular 3G (100ms, 75 了 
dide data URLs 1 XHR JS CSS Img Media Font Doc WS Manifest Other 
100 ms 150 ms 200 ms 250 ms 


Ti 


建议 同时 勾 选 Disable Cache ( 禁用 缓存 ) 汐 边 的 复 选 框 ， 每 次 加 载 页 面 ， 所 有 的 资源 都 会 


重新 下 载 。 这 样 就 可 以 模拟 出 低 网 速 条 件 下 ， 网 站 最 初 的 页 面 加 载 时 用 户 会 看 到 的 样子 。 


需要 保持 开发 者 工具 是 打开 状态 ,这 些 设置 才 会 生效 ,完成 后 记得 把 这 些 设置 恢复 到 正常 ， 


否则 下 次 你 打开 开发 者 工具 时 可 能 会 大 吃 一 惊 。 


13.5.2” 回 退 到 系统 字体 


针对 字体 加 载 ， 我 们 可 以 采用 两 种 基本 方法 。 第 一 种 ,在 CSS 中 使 用 回 退 字体 ， 然 后 在 选 
择 需 中 使 用 .fonts-loaded， 把 回 退 字体 改 成 想 要 的 Web 字体 。 这 样 就 可 以 把 浏览 化 的 FOIT 


(不 可 见 文 本 ) 改 为 FOUT (无 样式 文本 )。 


第 二 种 , 在 CSS 中 使 用 Web 字体 ， 然 后 在 选择 需 中 使 用 .fonts-failedq， 把 字体 改 成 回 退 
字体 。 这 种 方法 依然 会 产生 FOIT， 但 是 如 果 超 时 就 会 转换 为 系统 字体 ， 页 面 不 会 在 加 载 失败 时 


被 不 可 见 文本 卡 住 。 


这 两 种 方法 ,我 一 般 倾 回 于 第 二 种 ,但 这 纯粹 是 我 个 人 的 看 法 ， 至 于 哪 种 更 好 ， 取 决 于 你 的 








偏好 或 者 工作 项 目的 具体 内 容 ， 其 至 设置 多 久 的 超时 时 间 也 是 豆 好 问题 。 





我 们 来 实现 第 二 种 方法 。 代 码 清 单 13-11 中 的 代码 使 用 .fonts-failed 类 添加 回 退 样式 ， 


把 这 些 代 码 添 加 到 你 的 CSS 中 。 
代码 清单 13-11 定义 回 退 样式 ，FOIT 中 的 文本 卡 顿 又 会 出 现 了 


body { 
margin: 0; 
font-family: Roboto, sans-serif; 
line-height: 1.4; 
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letter-spacing: 0.01lem; 

background-color: var(--extra-light-gray);} 
} 
.fonts-failed body { 

font-family: Helvetica, Arial, sans-serif; 


} 


lL;. 2 fi Td 
font-family: Sansita, serif; 
letter-spacing: 0.03em; 
} 
.fonts-failed hi, 
.fonts-failed h2, 
.fonts-failed h3, 
.fonts-failed h4 { 
font-family: Georgia, serif; 


’ 








如 果 Web 字体 加 载 失 败 ， 
就 回 退 到 系统 字体 


.home-link { 
Color: var(--text-color).; 


font-size: 1.6rem; 
font-family: Sansita, serif; 
font-weight: boldgd; 


letter-spacing: 0.03em; 





text-decoration: none; 

} 

.fonts-failed .home-link { 
font-family: Georgia, serif; 


} 

字体 加 载 失 败 时 ( 或 者 加 载 超时 )，fonts-failed 类 被 添加 到 页 面 ， 回 退 样 式 就 会 应 用 到 
页 面 上 。 网 速 快 时 ，Web 字体 加 载 之 前 , 会 有 短暂 的 FOIT 出 现 。 如 果 网 速 比 较 慢 ，FOIT 会 持续 
两 秒 ， 然 后 显示 回 退 字 体 。 





提示 “我 们 为 调整 Web 字体 的 字符 间距 花费 了 很 多 时 间 。 你 可 能 也 想 为 回 退 的 系统 
衬 体 再 走 一 遍 同样 的 流程 ， 因 为 它们 的 字符 间距 很 可 能 不 一 样 。 可 以 把 这 些 调整 间距 
的 代码 放 在 fonts-failed 规则 集中 ， 这 样 只 有 在 Web 字体 加 载 失 败 时 才 会 应 用 。 
如 果 你 想 再 多 做 一 些 , 可 以 把 回 退 字体 调整 成 和 Web 字体 几乎 一 样 的 间距 , 这样 出 现 
FOUT 的 时 候 就 不 会 那么 明显 。Font style matcher 网 站 提供 的 工具 可 以 帮 你 做 这 些 ， 


处 理 字 体 加 载 没什么 标准 答案 。 如 果 你 对 站 点 的 加 载 时 间 进 行 了 分 析 , 那么 在 决定 使 用 哪 种 


方法 时 ， 可 以 使 用 它 来 帮助 你 。 一 般 来 说 ， 网 速 快 时 FOIT 更 容易 接受 一 些 ， 但 网 速 慢 时 应 该 倾 
器 于 FOUT， 根据 实际 情况 来 判断 。 
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13.5.3 ”准备 使 用 font-display 


有 个 新 的 CSS 属 性 font-display 正 在 开发 中 , 无须 JavaScript 的 帮助 就 可 以 更 好 地 控制 学 体 
加 载 。 和 截止 到 本 书 完 稿 之 时 ， 这 个 新 属性 仅 在 Chrome 和 Opera 浏 览 器 中 可 用 ，Firefox 即 将 支持 。 
我 会 简单 介绍 一 下 它 是 如 何 工作 的 ， 为 将 来 做 一 些 前 脆性 的 准备 。 

这 条 属性 需要 在 efont-face 规则 内 部 使 用 ， 用 来 指定 浏览 絮 应 该 如 何 处 理 Web 字体 加 载 。 
代码 清单 13-12 展示 了 一 个 示例 。 


代码 清单 13-12 ”font-display 属性 的 一 个 示例 
Qfont-face { 
font-family: "Roboto"; 





font-style: normal; 

font-weight: 300; 

src: local ("Roboto Light"), local ("Roboto-Light"), 
url (https://example.com/roboto.woff2) format ('woff2°'), 
url (https://example.com/roboto.woff) format ('woff').; 


font-display: swap; A 
) 加 载 字 体 时 使 用 swap 
行为 ， 即 FOUT 
这 告诉 浏览 需 立 即 显 示 回 退 字体 , 然后 等 Web 字体 可 用 的 时 候 进 行 交 换 (swap ), 简 而 言 之 ， 
承 是 FOUT。 
这 个 属性 同时 也 文 持 以 下 几 个 什 。 











口 auto 一 一 默认 行为 (在 大 多 数 浏览 途中 是 FOIT )。 
口 swap 显示 回 退 字体 ， 在 Web 字体 准备 好 之 后 进行 交换 ( FOUT )。 
口 fallback 一 一 介 于 auto 和 swap 之 间 。 文本 会 保持 较 短 时 间 ( 100ms ) 的 隐藏 状态 ， 如 





果 这 时 候 Web 字体 还 没有 准备 好 ， 就 显示 回 退 字体 。 接 下 来 一 旦 Web 字体 加 载 完 成 ， 就 
会 显示 Web 字体 。 
口 optional 一 一 类 似 于 fallback, 但 是 允许 浏览 硕 基 于 网 速 判 断 是 否 显示 Web 字体 。 这 
就 意味 者 在 较 慢 的 连接 条 件 下 Web 字体 可 能 不 会 显示 。 
这 些 选 项 比 之 前 的 几 行 JavaScript 提供 了 更 多 的 控制 能 力 。 对 于 高 网 速 ，fallback 表现 最 
好 , 会 出 现 短暂 的 FOIT, 但 如 果 Web 字体 加 载 超过 了 100ms 就 会 产生 FOUT。 对 于 低 网 速 , swap 
更 好 一 些 ， 可 以 立刻 泻 染 回 退 字体 。 如 果 Web 字体 对 于 整体 设计 来 讲 并 非 必 不 可 少 的 时 候 ， 就 
可 以 使 用 OPDtL1LOonal。 
如 何 控制 Web 字体 的 表现 是 个 比较 环 手 的 问题 。 如 果 想 要 更 深入 人 研究， 推荐 阅读 Jeremy L. 
Wagner 写 的 Web Performance in Action。 书 中 花 了 一 整 章 来 介绍 Web 字体 表现 ， 同 时 有 些 章节 
包含 其 他 跟 CSS 有 关 的 问题 。 























OQ 到 本 书 翻 译 时 ，Firefox 和 Safari 浏览 絮 都 已 经 支持 这 个 属性 。 一 一 译 者 注 
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13.6 总结 


口 使 用 字体 供应 商 〈 比如 谷歌 字体 ) 的 服务 可 以 轻松 集成 Web 字体 。 

口 严格 限制 添加 到 网 页 的 Web 字体 数量 ， 来 控制 页 面体 积 。 

口 使 用 @font-face 规则 集 管理 自己 的 字体 。 

口 花 点 时 间 调 整 1ine-height 和 1letter-spacing， 使 页 面 段落 分 明 、 清 晰 易 读 。 

口 使 用 Font Face Observer 或 其 他 JavaScript 来 协助 控制 加 载 行 为 ， 防 止 文本 隐藏 的 问题 。 
口 留意 以 后 font -display 的 支持 情况 。 

















本 章 概要 

口 使 用 过 渡 为 网 页 引入 动 效 

口 理解 定时 函数 并 选择 合适 的 效果 
口 配合 JavaScript 使 用 





在 传统 的 打印 媒介 上 ,事物 都 是 静止 不 动 的 。 文 字 不 能 在 纸 上 移 动 ， 闫 色 也 不 能 变化 。 但 是 
Web 是 个 新 鲜 生 动 的 媒介 ， 可 以 做 更 多 的 事情 ， 比 如 元 系 可 以 淡出 、 亲 单 可 以 滑 和 信 、 颜 色 可 以 从 
-种 变 为 男 一 种 ， 实 现 这 些 效 果 最 简单 的 方式 是 过 渡 ( transitions )。 

当 某 个 值 发 生 过 渡 (transitions ) 是 变化 时 , 通过 使 用 CSS 过 渡 , 你 可 以 让 浏览 器 使 用 “ease” 
方式 来 实现 变化 过 程 。 比 如 ， 我 们 有 个 蓝 色 的 链接 ， 其 悬 停 状 态 是 红色 ， 如 果 使 用 了 过 渡 ， 当 用 
户 鼠 标 划 过 在 元 素 上 面 的 时 候 ， 链 接 会 从 蓝 色 过 渡 到 紫色 再 过 渡 到 红色 ， 鼠 标 移 走 时 再 变 回 去 。 
如 果 正 确 使 用 ， 过 渡 可 以 增强 页 面 的 交互 效果 ， 而 且 因 为 我 们 的 眼睛 更 容易 被 动态 的 东西 吸引 ， 
所 以 当 变 化 产生 时 可 以 更 好 地 获得 用 户 关 注 。 

一 般 无 须 怎么 费力 就 可 以 在 页 面 上 添加 过 渡 效 果 。 本草 会 介绍 如 何 实现 过 渡 , 添加 过 程 中 如 何 
选择 合适 的 过 渡 效 果 。 因 为 有 些 用 例 可 能 会 比较 复杂 ， 所 以 我 们 也 会 研究 一 下 如 何 解决 这 些 问 题 。 


14.1 ”从 这 边 到 屠 边 


过 渡 是 通过 一 系列 transition-* 属 性 来 实现 的 。 如 果 某 个 元 素 设 置 了 过 渡 , 那么 当 它 的 属 
性 值 发 生变 化 时 ， 并 不 是 直接 变 成 新 值 ， 而 是 使 用 过 渡 效 果 。 

我 们 使 用 按钮 创建 一 个 基本 示例 ， 演 示 一 下 过 渡 的 工作 原理 。 最 开始 是 个 蓝 绿色 方 角 按钮 ， 
鼠标 悬 停 时 ， 过 渡 成 一 个 红色 圆 角 按钮 。 图 14-1 展示 了 这 两 种 状态 ， 同 时 还 有 过 渡 中 间 状 态 。 


图 14-1 过 渡 前 、 过 渡 中 和 过 渡 后 的 元 素 
添加 按钮 到 一 张 新 页 面 并 链接 样式 表 。 按 钮 的 标记 代码 如 代码 清单 14-1 所 示 。 
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代码 清单 14-1 为 页 面 添加 简单 的 按钮 


<button>Hover over me</button> 


然后 把 代码 清单 14-2 中 的 样式 添加 到 样式 表 。 这 些 样 式 定 义 了 正 贡 和 悬 停 两 种 状态 ， 其 中 有 
两 条 过 渡 属 性 ， 用 来 指导 浏览 硕 如 何在 两 种 状态 之 间 流 畅 过 渡 。 


代码 清单 14-2 ”使 用 过 渡 效 果 的 按钮 样式 























button { 
background-color: hsl(180, 50%, 50%); < 一 一 监 绿色 按钮 
border: 0; 
Color: white; 
font-size: lrem; 间 所 有 属性 变化 都 
padding: .3em lem; 使 用 过 渡 效 果 
transition-property: all; 
rarmitionmn Ourationy 人 583 -一 过 渡 时 间 为 0.5s 
} 
button:hover { 
background-color: hsl(0, 50%, S50%); 县 停 状态 为 带 圆 角 
border-radius: lem; 的 红色 按钮 


} 


transition-property 这 个 属性 可 以 指定 哪些 属性 使 用 过 渡 。 在 示例 中 ， 关 键 字 all 意 
味 着 所 有 的 属性 变化 都 使 用 过 渡 。transition-gduration 属性 代表 过 渡 到 最 终 值 之 前 需要 多 长 
时 间 ， 本 例 中 设置 为 0.5s， 代表 0.5s。 

加 载 页 面 并 使 用 鼠标 划 过 按钮 ， 就 可 以 查看 过 渡 效 果 。 注意 border-radius 属性 平滑 地 从 
0 过 渡 到 lem， 尽 管 非 悬 停 状 态 并 没有 明确 设置 边框 圆 角 为 0。 按 钮 自动 设置 了 初始 值 为 0， 过 
渡 是 从 0 开始 的 。 可 以 在 悬 停 状 态 尝试 更 改 其 他 属性 ， 比 如 font-size 和 border。 

元 条 属性 任何 时 候 发 生变 化 都 会 触发 过 渡 :， 可 以 是 状态 改变 的 时 候 ， 比 如 :hover; 也 可 以 
是 JavaScript 导致 变化 的 时 候 ， 比 如 添加 或 者 移 除 类 影响 了 元 系 的 样式 。 

注意 ， 我 们 没有 在 :hovez 规则 集 里 设置 过 渡 属 性 ， 而 是 把 过 小 属性 设置 在 了 一 个 始终 指 回 
该 元 素 的 选择 天， 尽管 我 们 的 目的 确实 是 要 在 鼠标 悬 保 时 话 加 过 渡 。 我 们 和 布 望 进入 悬 分 状态 时 
( 淡 入 过 渡 ) 和 退出 晤 集 状 态 时 (淡出 过 渡 ) 部 有 过 渡 。 虽 然 其 他 属性 发 生 着 变化 ， 但 你 肯定 不 
想 过 渡 属 性 本 号 发 后 变化 。 

也 可 以 使 用 简写 属性 transition, 语法 如 图 14-2 所 示 。 该 简写 属性 接受 四 个 参数 值 ， 分 别 
代表 四 个 过 渡 属 性 transition-property、 transition-duration,、 transition-timing-— 





























Function ml transitiondelays 


生效 的 属性 定时 函数 





transition: background-color 0.3s linear 0.5S:; 


持续 时 间 延迟 时 间 
图 14-2 _ transition 简写 属性 的 语法 
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第 一 个 值 设 置 了 哪个 属性 需要 过 渡 , 初始 值 是 关键 子 a11， 表示 所 有 属性 都 生效 。 如 果 只 有 
某 个 属性 需要 过 渡 ， 在 这 里 指定 属性 即 可 。 例 如 transition-property: color 将 只 应 用 在 
元 素 的 颜色 上 ， 其 他 属性 会 立刻 发 生变 化 。 也 可 以 设置 多 个 值 ， 比 如 transition-property : 
GDd GE Ont=sSLlZe 


第 二 个 值 是 持续 时 间 ， 是 一 个 用 秒 ( 例如 0.3s ) 或 者 毫秒 (300ms ) 表示 的 时 间 值 。 


警告 跟 长 度 值 不 太一 样 ，0 不 是 一 个 有 效 的 时 间 值 。 你 必须 为 时 间 值 添加 一 个 单位 
(0s 或 者 0ms )， 否 则 声明 将 无 效 ， 并 被 浏览 器 忽略 。 


第 三 个 值 是 定时 也 数 ,， 用 来 控制 属性 的 中 间 信 如 何 计算 , 实际 上 控制 的 是 过 渡 过 程 中 变化 率 
如 何 加 速 或 者 减速 。 定 时 因数 可 以 是 一 个 关键 字 值 ， 比 如 linear 或 者 ease-in， 也 可 以 是 日 
定义 函数 。 这 是 过 渡 中 很 重要 的 部 分 ， 稍 后 会 详细 说 明 。 

最 后 一 个 值 是 延 氏 时 间 ， 人 允许 开发 者 在 属性 信 改 变 之 后 过 渡 生 效 之 前 设置 一 个 等 竺 周期 。 如 末 
你 为 按钮 的 悬 停 状态 设置 0.5s 的 过 渡 延 民 , 那么 在 鼠标 指针 进入 元 素 0.5s 之 后 才 会 开始 发 生变 化 。 

如 采 需 要 为 两 个 不 同 的 属性 分 别 设 置 不 同 的 过 渡 , 可 以 添加 多 个 过 滤 规 则 ， 以 逗 吕 分 隔 ,， 如 
下 代码 所 示 。 

transition: border-radius 0.3s linear, background-color 0.6s ease; 


相应 地 ， 如 果 使 用 普通 写法 ， 上 面 的 代码 等 价 于 以 下 代码 。 


transition-property: border-radius, background-color; 
transition-duration: 0.3s, 0.6s; 
transition-timing-function: linear, ease; 


本 音 后 面 有 使 用 多 个 过 渡 的 例子 。 












































14.2 ”定时 浮 数 


定时 函数 是 过 渡 中 非常 重要 的 一 部 分 。 过 渡 让 某 个 属性 从 一 个 值 “ 移 动 ”到 男 一 个 值 ， 定时 
负数 用 来 说 明 如 何 移动 。 是 以 恒定 的 速度 移动 吗 ? 还 是 开始 的 时 候 慢 ， 后 面 越 来 越 快 ? 

我 们 可 以 使 用 几 个 关键 字 值 来 描述 移动 过 程 ， 比 如 linear、ease-in 和 ease-out。 使 用 
linear 过 渡 ， 值 以 固定 的 速度 改变 ; 使 用 sase-in， 变 化 速度 开始 时 慢 ， 然 后 一 直 加 速 ， 直 到 
过 渡 完 成 ; ease-out 是 减速 ,开始 时 快速 变化 , 结束 时 比较 慢 。 图 14-3 前 述 了 这 几 种 定时 了 果 数 
下 ， 小 盒子 如 何 从 左边 移动 到 右边 。 














linear 


ease-in 


eaSe-oOUt 





图 14-3 1inear 过 渡 以 恒定 的 速度 移动 ,而 ease-in 加 速 ，ease-out 减速 





312 第 14 章 过 渡 


从 带 态 图 片上 不 太 容 易 想 象 这 个 过 程 ,我 们 构建 一 个 示例 ， 以 便 在 浏览 絮 中 动态 查看 。 新 建 
一 个 HTML 页 面 并 添加 代码 清单 14-3。 


代码 清单 14-3 ”一 个 简单 的 定时 函数 演示 
<div class="container"> 这 个 盒子 将 从 屏幕 
左边 过 渡 到 右边 


<div class="box"></div> 
</div> 


接 下 来 为 盒子 设置 样式 ， 添 加 一 些 颜 色 和 大 小 。 然 后 为 盒子 绝对 定位 ， 当 鼠标 基 停 时 移动 它 
的 位 置 。 为 页 面 添加 新 样式 表 ， 并 复制 代码 清单 14-4 中 的 代码 。 


代码 清单 14-4 ”使 盒子 从 左边 过 渡 到 右边 


.Container { 





position: relative; 
height: 30px; 

} 

.box { 


DoSition: abesolutes 开始 时 定位 
2 到 最 左 侧 


height: 30px; 
width: 30px; 
background-color: hsl(130, 50%, 50%); 


transition: all 1s linear.; 
} 设置 过 渡 


.Container:hover .box { 
left: 400px; 鼠标 姑 停 时 向 右 
} 移动 400px 


演示 页 面 左 上 角 将 泻 染 一 个 小 绿 盒 和 于。 鼠标 悬 停 到 容 和 从 上 时 ,盒子 回 右 侧 移动 。 注 意 它 将 以 
固定 不 变 的 速度 移动 。 


警告 ”演示 页 面 通过 为 元 素 设置 绝对 定位 并 过 渡 left 属性 来 实现 它 在 屏幕 上 的 移动 。 
然而 有 一 些 属性 因为 性 能 原因 要 避免 使 用 过 渡 ， 其 中 就 包括 left。 接 下 来 的 章节 会 讲 
到 这 些 问 题 ， 并 使 用 转换 作为 更 好 的 替代 方案 。 


现在 可 以 编辑 过 滤 属 性 查看 不 同 的 定时 函数 是 如 何 工作 的 ， 答 试 一 下 ease-in (transition: 
1 本意 Oe Tn) lI edde=00t (CEanoitionis: SITl 18 aoe=0te 仅 使 用 这 些 关键 字 值 
就 可 以 完成 工作 了 , 但 有 时 你 可 能 希望 有 更 多 的 控制 。 这 时 你 就 可 以 目 己 定义 定时 图 数 。 下 面 来 
看 一 下 如 何 实现 。 














14.2.1 ”理解 贝 塞 尔 曲 线 


定时 函数 是 基于 数学 定义 的 贝 塞 尔 曲线 (Bezier curve )。 浏 览 器 使 用 贝 塞 尔 曲线 作为 随时 间 
变化 的 防 数 ， 来 计算 茶 个 属性 的 值 。 图 14-4 展示 了 儿 种 定时 函数 的 贝 塞 尔 曲 线 ， 同 时 这 几 个 关 
键 子 值 部 可 以 用 作 定 时 函数 。 
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这 些 贝 塞 尔 曲 线 都 是 从 左下 方 开 始 ， 持续 延伸 到 右上 方 。 时 间 是 从 左 丫 右 弟 进 的 ， 曲 线 代 表 
某 个 值 在 到 达 最 终 值 的 过 程 中 是 如 何 变 化 的 ,linear 定时 函数 在 整个 过 渡 期 间 是 个 稳定 的 过 程 ， 
呈现 为 一 条 直线。 其 他 定时 函数 有 弯曲 的 地 方 ， 代 表 加 速 或 者 减速 。 


yal 


时 间 


linear ease ease-in ease-out ease-in-out 
图 14-4 ”定时 函数 的 贝 塞 尔 曲 线 摘 述 了 值 是 如 何 随 时 间 变 化 的 


然而 , 我 们 不 应 该 局 限 在 这 五 种 天 键 字 贝 星 尔 曲线 上 。 我 们 可 以 定义 目 己 的 三 次 贝 塞 尔 曲 线 
( ubic Bézier curve )， 实 现 更 温和 或 者 更 蝇 烈 的 过 小 效 朱 ， 甚 至 可 以 添加 一 点 “弹跳 ” 效 末 。 下 面 
我 们 来 试 试 。 

在 刚才 创建 的 页 面 上 ， 打 开 开 发 者 工具 并 检查 小 绿 盒子 元 素 。 在 样式 面板 (Chrome ) 或 者 
规则 面板 ( Firefox ) 中 ， 你 会 发 现 定 时 阔 数 劳 边 有 一 个 小 小 的 标志 符号 。 点 击 标志 符号 会 打开 一 
个 弹 窗 ， 可 以 在 弹 窗 中 修改 定时 函数 的 曲线 (如 图 14-5 所 示 )。 




















Filter :hov .cls a 


element,. style { 


“box { Listing-14.5,htmL:11 
position: absolute; 
left: 0; 
height: 30px; 
width: 30px; 


background-color: 国 hsl(130, 50%,，50%); 
transition:P all 1s 国 ease-out; 

} 

div { 
display: blocl 








< ease-out > 


图 14-5 在 Chrome 的 开发 者 工具 中 修改 贝 塞 尔 曲 线 


在 弹 窗 左 侧 ， 界面 上 提供 了 一 系列 预 设 的 曲线 (Firefox 提供 的 比 Chrome 多 多 了 )， 点 击 曲 
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线束 可 以 也 接 选 取 。 弹 窗 右 侧 展示 选中 的 贝 窒 尔 曲线 。 

曲线 的 每 个 末端 都 有 一 条 短 直 线 一 一 控制 权 ( handles )， 直 线 上 有 小 圆 点 ， 称 为 控制 点 
( control points )。 点 击 并 拖 动 小 圆 点 可 以 改变 曲线 的 形状 ， 注 意 欣 制 柄 的 长 度 和 方向 是 如 何 “ 军 
引 ” 曲 线 的 。 

点 击 弹 窗外 部 可 以 关 挥 弹 窗 ， 可 以 看 到 定时 消 数 已 经 更 新 了 了。 和 蔡 换 挥 了 之 前 的 类 似 于 
ease-out 这 样 的 关键 字 ， 改 成 了 像 cubic-pezier(0.45，0.05，0.55，0.95) 这 样 的 写法 。 
cubic-bezier() 函数 和 4 个 参数 共同 组 成 了 自 定 义 定时 函数 。 














选择 定时 函数 
不 管 你 使 用 关键 字 定 时 函数 还 是 自 定义 贝 塞 尔 曲 线 , 了解 一 下 什么 时 候 该 使 用 哪 种 都 是 很 有 
用 的 。 每 个 网 站 或 者 应 用 程序 都 应 该 包含 一 条 减速 曲线 ( ease-out ) 一 条 加 速 曲 线 (ease-in ) 
和 1linear 关键 字 。 最 好 的 做 法 是 复 用 相同 的 几 条 曲线 ， 提 供 更 加 一 致 的 用 户 体 验 。 
可 以 在 下 列 场景 中 分 别 使 用 这 三 种 函数 。 











口 线性 颜色 变化 和 淡出 、 淡 入 效果 。 

口 减速 用 户 发 起 的 变化 。 用 户 点 击 按钮 或 者 划 过 元 素 的 时 候 ， 使 用 ease-out 或 者 
类 似 曲 线 。 这 样 用 户 就 可 以 看 到 快速 发 生 的 反馈 ; 及 时 响应 输入 ,然后 元 素 慢 慢 过 渡 到 
最 终 状 态 。 

口 加 速 系统 发 起 的 变化 。 当 内 容 加 载 完 成 或 者 超时 事件 触发 的 时 候 ， 使 用 ease-in 或 


者 类 似 曲 线 。 这 样 元 素 就 可 以 慢 慢 引起 用 户 注 意 ， 然 后 速度 越 来 越 快 直到 完成 最 终 变 化 。 

当然 ,这些 都 不 是 硬性 规定 ， 只 是 提供 了 一 些 思路 ， 如 果 感 觉 不 太 合适 ， 完 全 可 以 不 用 遵 

守 这 些 规则 。 有 时 你 可 能 还 需要 更 多 的 曲线 来 实现 更 复杂 或 者 更 有 趣 的 过 渡 ， 可 以 使 用 
ease-in-out ( 先 加 速 后 减速 ) 或 者 弹跳 效果 ( 弹跳 的 示例 参见 第 1$ 询 。 


下 面 我 们 进一步 研究 cupic-pbezier () 是 如 何 工 作 的 。 图 14-6 展示 了 邦 一 种 曲线 。 
(1, 1) 


(0.45, 0.05) 
时 间 一 一 > 
图 14-6 贝 塞 尔 曲 线 表示 定时 函数 





(0, 0) 


14.2 是 时 函数 SL 


这 张 图 片上 是 一 条 自 定 义 贝 塞 尔 曲 线 。 这 条 曲线 开始 时 加 速 , 在 中 间 的 时 候 达 到 最 快 (曲线 上 
最 陡峭 的 部 分 )， 到 后 面 开始 减 速 。 曲 线 位 于 笛 卡 儿 网 格 内 ， 从 点 (0,0 ) 开始 ， 到 点 (1,1 ) 结 

两 端的 端点 既然 确定 了， 只 需要 再 确定 两 条 控制 柄 的 位 置 就 可 以 定义 曲线 了 。 在 CSS 中 ， 
曲线 可 以 通过 cubic-bezier(0.45，0.05，0.55，0.95) 来 定义 ， 其 中 的 四 个 参数 分 别 代表 
两 个 控制 柄 的 控制 点 的 x 和 yy 坐标 。 

我 们 很 难 通 过 这 些 数 字 想 象 出 来 曲线 的 具体 样式 ,使 用 图 形 化 工具 来 编辑 曲线 更 符合 一 贯 做 
法 ,因此 我 会 在 复制 由 塞 尔 曲 线 的 结 采 到 样式 表 之 前 ， 先 在 浏览 套 中 编辑 、 测 试 过 湾 将 果 。 我 比 
较 喜 欢 使 用 开发 者 工具 ， 你 也 可 以 使 用 一 些 在 线 工 具 ， 比 如 cubic-bezier 网 站 。 





14.2.2 ” 阶 跃 


最 后 再 介绍 一 种 定时 函数 ， 即 steps () 因数 。 跟 前 面 介 绍 的 从 一 个 值 到 另 一 个 值 的 基于 贝 
塞 尔 曲线 的 流畅 过 渡 不 同 ， 这 个 遇 数 是 一 系列 非 连续 性 的 瞬时 “ 阶 跃 ”(steps )。 

阶 跃 函 数 需 要 两 个 参数 : 阶 跃 次 数 和 一 个 用 来 表示 每 次 变化 发 生 在 阶 跃 的 开始 还 是 结束 的 关 
键 词 ( start 或 者 end )。 图 14-7 描述 了 一 些 阶 跃 限 数 。 


ee 


时 间 一 一 





step(2, end) steps(2, start) steps(5, end) steps(5, start) 


图 14-7 step () 困 数 递增 改变 值 


注意 因为 第 二 个 参数 的 默认 值 是 sna， 所 以 steps(3) 可 以 用 来 代替 steps (3，end)。 按 
代码 清单 14-5 编辑 样式 表 ， 查 看 阶 路 的 实际 效果 。 


代码 清单 14-5 ”使 用 steps () 增加 值 
olieb-d | 
position: absolute; 
eft yO 
height: 30px; 
width: 30px; 
background-color: hsl(130, 50%, 50%); | 三 次 非 连续 性 
transition: all ls Steps(3) ; 的 阶 跃 过 小 








) 

现在 就 不 是 一 秒 内 ( 过 渡 持 续 时 间 ) 流畅 地 从 左 到 右 移动 了 ,时间 和 被 分 成 了 三 等 份 ， 或 者 说 
三 步 。 每 一 步 时 ， 盒 子 分 别 出 现 在 开始 的 位 置 、 三 分 之 一 的 位 置 、 三 分 之 二 的 位 置 ， 最 后 在 1s 
的 时 刻 移 动 到 最 终 位 置 。 
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说 明 默认 情况 下 ， 必 性 值 在 每 一 步 结束 的 时 候 改 变 ， 因 此 过 渡 不 会 立即 开始 。 添 加 
start 关键 字 steps (3，start) 就 可 以 改变 这 种 行为 ， 这 样 过 渡 就 会 发 生 在 每 步 开始 
的 时 候 ， 而 不 是 结束 。 





steps () 也 数 的 实际 应 用 并 不 常见 ，css-tricks 网 站 的 文章 Clever Uses for Step Easing 中 的 清 
ee 


14.3 ” 非 动 画 属 性 


大 部 分 的 过 渡 很 容易 理解 。 比如 ， 对 链接 使 用 tramneitions: Color 200me Linear, 当 
鼠标 悬 停 或 者 点 击 的 时 候 , 它们 就 会 从 一 种 颜色 过 渡 到 为 一 种 。 你 也 可 以 对 可 点 击 板块 的 背景 闫 
色 或 者 按钮 的 内 边 距 使 用 过 渡 。 

如 果 JavaScript 修改 了 页 面 上 的 东西 ， 你 可 能 大 需要 孝 谍 兴 加 过 才 渡 是 否 合适 。 有 些 情 况 下 比 
en 遇 到 复杂 的 情况 就 需要 一 些 额外 配置 了 。 本 间接 下 来 
会 介绍 如 何 创建 下 拉 玉 单 并 添加 过 渡 效 果 ， 这 样 傈 单打 开 时 比较 柔和 ， 而 不 是 突 元 地 出 现 。 

首先 ， 需 要 设置 菜单 为 淡 和 入， 为 opacity 属性 添加 过 渡 。 然 后 修改 下 拉动 作 实现 不 一 样 的 
效 朱 ， 为 height 添加 过 渡 。 这 两 步 都 出 现 了 一 些 问题 ， 我 们 需要 再 思考 一 下 。 

菜单 的 外 观 如 图 14-8 所 示 。 我 们 和 匈 从 实现 沫 单 的 打开 和 关闭 开始 ， 然 后 添加 过 渡 效 采 。 沫 
单 下 方 有 个 链接 ， 注 意 沫 单 的 抽 屠 打开 的 时 候 是 如 何 出 现在 链接 上 方 的 ， 这 非常 重要 。 























Menu Menu 
mor Features 
Pricing 
Support 
About 


图 14-8 下拉 沫 单 的 关闭 〈 左 ) 和 打开 ( 右 ) 状态 


为 下 拉 菜 单 新 建 一 个 页 面 ， 添 加 代码 清单 14-6 中 的 代码 。 这 和 前 面 章节 创建 的 下 拉 菜 单 差 
不 多 ， 同 时 也 包含 了 一 些 JavaScript 来 触发 菜单 的 打开 和 关闭 状态 。 


代码 清单 14-6 ”过 渡 效 果 下 拉 菜 单 
<div class="dropdown" aria-haspopup="true"> 
<button class="dropdown toggle">Menu</button> 


*dlYy Classs"dropdow Orawer"> re 
<ul class="menu" role="menu"> 地 会 王 东 和 隐 闫 ， 
<]11 role="menuitem"> 以 此 来 展示 菜单 


<a href="/features">Features</a> 
</11i> 
<l1i role="menuitem"> 

<a href="/pricing">Pricing</a> 
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</1i> 

<1i role="menuitem"> 

<a href="/support">Support</a> 
</1i> 

<1i role="menuitem"> 

<a href="/about">About</a> 





< /> 
< /> 
显示 在 下 拉 菜 
单 下 方 的 链接 


<D><a href="/read-more">Read more</a></p> 


<script type="text/jJavascript"> 





(function () { 
var toggle = document .getElementsByClassName('dropdown toggle'){[0]; 
var dropdown = toggle.parentElement,; 
toggle.addEventListener('click', function (e) { 按钮 点 击 时 在 容器 上 添加 
e.preventDefault(); 和 删除 is-open 类 


dropdown.classList.toggle('is-open'); 
} 3 
a 


</script> 


没 添加 淡 入 特效 之 前 的 样式 如 代码 清单 14-7 所 示 。 把 这 些 代码 放 到 样式 表 中 ,并 链接 到 页 面 
上 。 代码 中 已 经 添加 了 一 些 过 渡 效 果 ， 鼠 标 悬 停 时 ， 颜 色 可 以 平滑 过 渡 。 除 此 之 外 没有 太 多 新 内 
容 ， 页 面 已 经 可 以 正常 运行 了 ， 这 样 你 就 可 以 专心 研究 如 何 创建 淡 入 特效 了 。 


代码 清单 14-7 过渡 效 果 下 拉 有 末 单 的 样式 
body { 
font-family: Helvetica, Arial, sans-serif; 




















.dropdown toggle { 
display: block; 
padding: 0.5em lem; 
border: lpx solid hsl(280, 10%, 80%); 
color: hsl(280, 30%, 60%); 
background-color: white; 


font: Laney 背景 色 改 变 的 时 
text-decoration: none; 候 添加 过 渡 效 果 


transition: background-color 0.2s linear; 
} 
.dropdown toggle:hover { 
background-color: background-color: hsl(280, 15%, 95%); 
鼠标 悬 停 时 改 


、 
亦 沙 旦 六 
.dropdown drawer { 变 背 景 颜 色 





position: absolute; 
display: none; 
background-color: white; 
width: 10em; 

} 


.dropdown.is-open .dropdown drawer { 


display: block; 
} 


.menu { 
padding-left: 0; 
margin: 0; 
list-style: none; 

} 

.menu > 1i1 + 1i >at 
border-top: 0; 

} 

.menu > 1]11 > aa 1{ 
display: block; 
padding: 0.5em lem; 
color: hsl(280, 40%, 60%); 


background-color: white; 为 背景 颜色 和 文 
text-decoration: none; 本 颜色 添加 过 渡 
transition: all .2s linear; 


border: lpx solid hsl(280, 10%, 80%); 
} 


.menu > 11 > a:hover { 





background-color: hsl1(280, 15%, 95%); 鼠标 悬 停 时 
color: hsl(280, 25%, 10%); 改变 颜色 





} 


在 浏览 避 中 打开 网 页 查看 实际 效果 。 可 以 点 击 开关 按钮 打开 和 关闭 菜单 。 注意 观察 按钮 和 菜 
中 链接 在 忆 标 县 人 时 是 如 何平 滑 过 渡 闫 色 的 ， 鼠标 移 开 时 又 是 如 何 变化 的 。 

这 里 对 悬 停 效 果 使 用 了 0.2s 的 过 渡 持 续 时 间 。 按照 。， 大 部 分 的 过 渡 持 续 时 间 应 该 处 
于 200 ~ 500ms。 时 间 如 果 再 长 ， 用 户 就 会 感觉 页 面 变 得 卡 慢 ， 页 面 响应 让 他 们 产生 了 无 谓 的 等 
等 ， 尤 其 是 面 对 那 些 经 常 或 者 重复 使 用 的 过 渡 os 


提示 “对 于 和 鼠标 悬 停 、 淡 入 淡出 和 轻微 缩放 特效 ， 应 该 使 用 较 快 的 过 渡 速 度 。 
控制 在 300ms J 有 时 候 其 至 可 能 要 低 到 100ms。 对 于 那些 包 0 或 者 复 
定时 函数 的 过 渡 ， 比 如 弹跳 特效 ( 参见 第 15 章 )， 要 使 用 较 长 的 300 ~ 500ms ， 
时 间 。 


我 在 处 理 过 渡 的 时 候 ， 有 时 会 放 慢 到 两 三 秒 。 这 样 我 就 可 以 仔细 观察 过 渡 过 程 ， 确 保 是 按 我 
想 要 的 效果 在 运行 。 如 果 你 也 是 这 样 做 ， 记 得 在 完成 之 后 改 回 合适 的 速度 。 


14.3.1 不 可 添加 动画 效果 的 属性 


不 是 所 有 属性 都 可 以 添加 动画 效果 ,display 属性 就 是 其 中 之 一 ,你 可 以 在 display: none 
和 display: block 之 间 切 换 ， 但 不 能 在 这 两 个 值 之 间 过 渡 ， 因 此 ， 任 何 应 用 到 aisplay 上 的 
过 渡 属 性 都 会 被 忽略 。 
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如 有 果 你 在 MDN 之 类 的 参考 指南 上 查阅 属性 ,它们 就 会 明确 告诉 你 某 个 属性 是 否 可 以 添加 动 
画 效 果 ， 什 么 类 型 的 值 (比如 长 度 、 颜 色 、 百 分 比 ) 可 以 用 内 持 值 “替换 。MDN 文 档 
Backeround-color 中 关于 background-color 属 性 的 细 市 展示 在 图 14-9 中 。 








Initial value transparent 

Applies to all elements. It also applies to : :first-letter and : :first- 
line. 

Inherited no 

Media visual 

Computed value lf the value is translucent, the computed value will be the xgba( ) 


corresponding one. If it isn't, it will be the rgb( ) corresponding 
one. The transparent keyword maps to rgba(0,0,0,0). 


Animation type a color 


Canonical order the unique non-ambiguous order defined by the formal grammar 


图 14-9 MDN 文档 为 每 个 属性 都 提供 了 技术 能 力 总 结 框 


如 图 所 示 ，background-color 属性 只 有 一 个 颜色 值 的 时 候 才 可 以 添加 动画 ， 意 思 是 从 一 
个 颜色 过 滤 到 另 一 个 颜色 ( 这 就 意味 大 属性 必须 设置 为 单一 闫 色 值 )。 属 性 的 动画 类 型 不 仅 用 于 
过 渡 ， 还 可 用 于 第 16 章 要 讲 的 动画 。 文 档 中 还 列 出 了 关于 属性 的 一 些 其 他 的 有 用 信息 ， 比 如 它 
的 初始 值 ， 哪 种 类 型 的 元 素 可 以 使 用 , 是否 可 以 继承 等 。 如 果 你 需要 一 份 如 何 使 用 某 个 属性 的 技 
术 能 力 总 结 ， 可 以 在 MDN 文档 中 找到 该 属性 并 查找 它 的 属性 框 。 


说 明 大 部 分 的 接受 长 度 值 、 数 值 、 闫 色 值 或 者 calc () 函数 值 的 属性 可 以 添加 动画 效果 ; 

大 部 分 的 使 用 关键 字 或 者 其 他 非 连 续 性 值 的 属性 (比如 url() ) 不 可 以 使 用 动画 。 

如 果 你 查阅 过 aisplay 属性 ， 你 会 发 现 它 的 动画 类 型 是 aiscrete， 这 就 意味 着 它 只 能 被 
赋予 非 连续 性 的 值 , 不 能 在 动画 或 者 过 渡 中 做 插值 计算 。 我 们 这 里 要 实现 元 素 的 淡 和 人 淡出， 就 不 
能 使 用 di splay 属性 了 ， 但 我 们 可 以 使 用 opacity 属性 。 


























14.3.2 ” 痰 入 与 淡出 


接 下 来 , 我 们 使 用 透明 度 的 过 渡 为 下 拉 菜 单 的 打开 和 闭合 添加 淡 入 淡出 特效 。 最 终 效果 大 概 
如 图 14-10 展示 的 那样 。 


J 内 插值 是 指 为 了 达到 流畅 的 动画 效果 ， 在 两 个 值 之 间 插入 一 系列 介 于 两 值 之 间 的 事先 计算 好 的 值 ， 计 算 人 逻辑 及 插 
值 速度 取决 于 定时 函数 。 一 一 译 者 注 
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图 14-10 ”菜单 淡 入 
opacity 属性 可 以 是 介 于 0 (完全 透明 ) 和 1 (完全 不 透明 ) 之 间 的 任意 值 。 代 码 清单 14-8 
展示 了 基本 思路 , 但 只 有 这 些 代码 还 不 行 , 很 快 你 就 会 明日 原因 。 先 把 样式 表 按 代码 清单 14-8 更 
新 一 下 。 
代码 清单 14-8 ”添加 透明 度 和 过 渡 规 则 


.dropdown drawer { 


position: absolute; 
background-color: white; 使 用 opacity: 0 替换 








width: 10enm， display: none 
opacity: 0; 
transition: opacity 0.2s linear; 为 透明 度 添 
浊 SIAN 
. 加 过 渡 交 
0 过 渡 效 果 
.dropdown.1s-open .dropdown drawer { SE 
opacity: 1; 


) 使 用 opacity: 1 替换 


display: block 





现在 打开 和 关闭 菜单 可 以 淡 入 淡出 了 , 但 问题 是 采 单 关闭 的 时 候 并 不 会 消失 ,只 是 完全 和 表 明 
了 ,仍然 存在 于 页 面 上 。 这 时 候 点 击 Read more 链接 ， 不 会 按照 预期 工作 。 我 们 实际 上 点 击 了 链 
接 前 面 的 透明 沫 单元 素 ， 跳 转 到 了 Features 页 面 。 

我 们 需要 为 透明 度 添 加 过 渡 , 但 同时 需要 在 来 单 抽 敢 不 可 见 时 彻底 移 除 它 。 可 以 倩 助 另 一 个 
属性 visipility 来 实现 。 

visibility 属性 可 以 从 页 面 上 移 除 某 个 元 素 ， 有 点 类 似 于 display 属性 ， 分 别 设 置 
visible 和 higdgden 即 可 。 但 跟 display 不 同 的 是 ，visibility 可 以 支持 动画 。 为 它 设 置 过 
渡 不 会 使 其 逐渐 消失 , 但 transition-delay 可 以 生效 ， 而 在 display 属性 上 是 不 生殖 的 。 


说 明 ”为 某 个 元 素 设 置 visibility: hidden 可 以 从 可 见 页 面 中 移 除 该 元 素 ， 但 不 会 
OCR 绕 该 元 素 的 位 置 布 








局 ， 在 页 面 上 保留 一 个 空白 区 域 。 在 我 们 的 例子 中 ， 不 会 影响 到 菜单 ， 因 为 我 们 同时 也 
设置 了 绝对 定位 。 


我 们 可 以 利用 visipility 的 这 个 能 力作 为 小 答 门 来 实现 动画 。 按 照 代码 清单 14-9 更 新 
CSS， 然 后 我 会 讲解 它 是 如 何 工 作 的 。 
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代码 清单 14-9 在 visibility 改变 时 巧妙 使 用 过 渡 延 迟 
.dropdown drawer { 
position: absolute; 
background-color: white; 
width: 1l0em; 


opacity: 0; 菜单 关闭 时 , 设置 





visibility: hidden; 隐藏 和 透明 
transition: opacity 0.2s linear., 
visibility 0s linear 0.28s; 为 可 见 性 添加 0.2s 

| 的 过 渡 延 迟 
.dropdown.1s-open .dropdown drawer { 

opacity: 1; 菜单 打开 时 , 设置 可 见 

visibility: visible; 和 完全 不 透明 

transition-delay: 0s; 
} 添加 is-open 类 时 

移 除 过 渡 延 迟 





我 们 在 这 里 为 过 渡 设 置 了 两 组 值 ， 定义 了 淡出 行为 。 第 一 组 值 为 opacity 设置 0.2s 的 过 渡 ， 
第 二 组 值 为 visibility 设置 0s 的 过 渡 ( 立即 执行 )， 但 有 0.2s 的 延迟 。 这 就 意味 首先 执行 opacity 
的 过 渡 ， 结 束 之 后 青 执行 visibility 的 过 渡 。 这 样 就 实现 了 沫 单 的 缓慢 淡出 ， 当 完全 透明 的 时 候 ， 
可 见 性 切换 为 nigqden。 现 在 用 户 就 可 以 点 击 “Read more” 链 接 而 不 受 末 单 的 干扰 了 。 

末 单 淡 入 的 时 候 , 我 们 需要 不 同 的 顺序 ， 这 时 候 可 见 性 需要 立即 触发 , 然后 再 执行 透明 度 的 
过 渡 。 这 就 是 为 什么 我 们 在 第 二 个 规则 集中 把 过 渡 延 迟 设 置 为 0s。 这 样 一 来 ， 采 单 关 闭 时 ， 其 
实 是 不 可 见 的 ， 但 是 整个 淡 入 和 淡出 过 渡 过 程 中 都 是 可 见 的 。 














提示 “你 可 以 使 用 JavaScript 的 transitioneng 事件 在 过 渡 完 成 之 后 做 一 些 额外 处 理 。 


淡 入 淡出 特效 也 可 以 使 用 一 些 JavaScript 代码 来 代 蔡 过 渡 延 迟 ， 但 我 觉得 这 样 需要 使 用 更 多 
的 代码 ， 而 且 容 易 出 错 。 然 而 有 时 候 为 了 实现 想 要 的 效果 ， 有 必要 使 用 JavaScript ( 接 下 来 很 快 
就 会 见 到 )， 但 如 打 一 个 过 小 或 者 动画 只 用 CSS 就 可 以 实现 ， 一 般 会 选择 CSS。 


14.4 ”过渡 到 自动 高 度 


我 们 尝试 为 下 拉 菜 单 添加 另 一 种 常见 的 效果 , 即 通过 高 度 的 过 渡 来 滑动 打开 和 关闭 菜单 。 这 
种 效果 如 图 14-11 所 示 。 
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图 14-11 通过 过 渡 高 度 来 滑动 打开 元 素 
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菜单 打开 时 ， 会 从 高 度 为 0 过 渡 到 正常 高 度 (auto )。 菜 单 关 闭 时 ， 又 会 过 渡 回 0。 代 码 清 
单 14-10 展示 了 基本 思路 ， 遗 憾 的 是 ， 它 不 起 作用 。 先 把 你 的 代码 中 的 这 部 分 改 成 该 清单 中 的 样 
子 ， 然 后 我 们 来 看 看 问题 出 在 哪 ， 如 何 处 理 。 


* NEE & 、 » ee 
代码 清单 14-10 ”过 渡 高 度 值 
.dropdown drawer { 
position: absolute; 
background-color: white; A ,Es 
width: 1l0em; 关闭 状态 下 高 度 为 0， 
height: 0; overflow 为 hidden 





overflow: hidden:; 


transition: height 0.3s ease-out; 
} 为 高 度 添 加 过 渡 


.dropdown.is-open .dropdown drawer { 
height: auto; 


) 打开 状态 下 的 高 度 


由 内 容 决 定 
设置 overflow 为 hidden, 是 为 了 在 关闭 或 者 过 渡 过 程 中 截断 抽 居 的 内 容 。 代码 不 起 作用 是 因 
为 一 个 值 不 能 从 长 度 (0 ) 过 渡 到 auto。 
你 可 以 明确 设置 一 个 高 度 值 ， 比 如 120px,， 但 问题 是 没 办 法 知道 高 度 到 底 是 多 少 。 因 为 只 有 
当 内 容 在 浏览 如 中 泻 染 完成 之 后 才能 确定 高 度 ， 所 以 需要 使 用 JavaScript 来 获取 。 
页 面 加 载 完 成 后 , 我 们 访问 DOM 元 素 的 scrollHeignht 属性 , 就 可 以 获取 到 高 度 值 , 然后 
就 可 以 把 元 每 的 高 度 修改 为 获取 到 的 什 。 按 照 代码 清单 14-11 编辑 页 面 脚本 。 


代码 清单 14-11 精确 设置 元 系 局 上 度 ， 让 过 渡 效 来 起 作用 

















(function () { 
var toggle = document .getElementsByClassName('dropdown toggle')[0]; 
Var dropdown = toggle.parentElement; 
Var drawer = document .getElementsByClassName('dropdown drawer')|[0]; 


Var height = drawer.scrollHeight; Ee 2 
获取 计算 得 到 的 
function (e) { 

















toggle.addEventListener('click', 抽 居 自动 高 度 值 

e.preventDefault(); 

dropdown.classList.toggle('is-open'); 

if (dropdown.classList.contains('is-open')) { 打开 的 时 候 精 确 
drawer.style.setProperty('height', height + 'px'); 设置 高 度 值 

} else { 
drawer.style.setProperty('height', '0'),; 关闭 的 时 候 把 

, 高 度 重 置 为 0 


ee 
) 


Ts 


现在 ， 除 了 触发 is-open 类 ， 我 们 还 为 元 素 的 高 度 指 定 了 精确 的 像素 值 ， 这 样 就 可 以 过 渡 
到 正确 的 高 度 。 然 后 在 关闭 的 时 候 把 高 度 值 重新 设置 为 0， 这 样 采 单 义 可 以 过 渡 回 去 。 
警告 ”如果 一 个 元 素 使 用 dijsplay: none 隐藏 起 来 ， 那 它 的 scrollHeight 属性 等 


于 0。 遇 到 这 种 情况 的 时 候 ， 可 以 先 把 display 属性 设置 为 block (el.style.display = 
'block' ), 获取 到 scrollHeight, 然后 重 置 display 的 值 ( el .style.display = 'none' 
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有 时候 过 渡 需 要 CSS 和 JavaScript 相互 配合 。 某 些 情况 下 ， 整 个 逻辑 都 使 用 JavaScript 实现 
可 能 更 容易 想到 。 比 如 ， 只 使 用 JavaScript 重复 设置 新 的 高 度 值 就 可 以 实现 高 度 的 过 渡 ， 但 我 们 
通常 应 该 使 用 CSS 去 做 那些 需要 消耗 性 能 的 事情 。 浏 览 硕 对 这 部 分 已 经 做 过 优化 〈 当然 就 会 有 
更 好 的 性 能 表现 )， 并 且 提 供 了 类 似 于 过 湾 曲 线 的 特性 ， 避 免 了 手动 实现 需要 书写 的 大 量 代 码 。 
对 于 过 渡 来 说 ， 只 学 习 这 些 还 不 够 。 在 第 15 草 中 ， 过 渡 与 变换 结合 起 来 会 更 有 用 。 











14.5 ” 避 结 


口 使 用 过 渡 可 以 使 页 面 中 的 突变 变 得 平滑 。 

口 使 用 加 速 运动 可 以 吸引 用 户 注 意 力 。 

口 通知 用 户 他 们 的 行为 已 生效 ， 应 该 使 用 减速 运动 。 

口 只 使 用 CSS 无 法 满足 需求 时 ， 可 以 使 用 JavaScript 更 改 类 配合 过 渡 来 实现 。 














本 草 概要 

口 使 用 变换 操作 元 系 ， 提 升 过 渡 和 动画 的 性 能 
口 为 过 渡 添 加 “弹跳 ” 效 朱 

口 浏览 融 的 泻 染 路 径 

口 了解 3D 变换 和 透视 距离 





本 章 我 们 将 学 习 transform 属性 ， 它 可 以 用 来 改变 页 面 元 系 的 形状 和 位 置 ， 其 中 包括 二 维 
或 者 三 维 的 旋转 、 缩 放 和 倾 笠 。 变 换 通 各 结合 过 渡 或 动画 一 起 使 用 , 这 也 是 为 什么 我 把 本 章 内 容 
放 在 这 两 个 话题 之 间 。 本 章 和 第 16 章 将 用 到 大 量 的 过 渡 、 变 换 和 动画 来 创建 页 面 。 

首先 , 我 们 会 看 看 如 何在 议 态 元 系 上 应 用 变换 。 这样 束 可 以 理解 这 些 变 换行 为 怎样 独立 发 挥 
作用 , 便于 后 面 把 变换 请 加 到 过 渡 中 。 然 后 我 们 会 创建 一 个 复杂 的 小 集 单 , 用 到 多 种 变换 和 过 湾 
效果 。 最 后 我 们 会 看 看 如 何 使 用 3D 变换 和 透视 图 。 这 部 分 内 容 会 一 直 延 续 到 下 一 章 ， 到 时 候 我 
们 会 把 3D 变换 结合 动画 一 起 使 用 。 


15.1 旋转、 平移、 缩放 和 倾斜 
基本 的 变换 规则 如 下 所 示 。 














transform: rotate(90deg); 


这 条 规则 应 用 到 元 素 上 之 后 ， 会 使 元 素 问 右 ( 顺 时 针 ) 旋转 90 度 。 变 换 聘 数 rotate() 用 
来 指定 元 素 如 何 变换 。 还 有 其 他 几 种 不 同 的 变换 函数 , 这 些 闵 数 通 稼 被 分 成 以 下 四 类 (如 网 15-1 
所 示 )。 

口 旋转 ( Rotate ) 





元 系 绕 者 一 个 轴 心 转动 一 定 角度 。 

口 平移 ( Translate ) 元 素 加 上、 下、 左 、 碳 各 个 方 回 移动 (有 点 类 似 于 相对 定位 )。 
口 缩放 ( Scale ) 缩小 或 放大 元 素 。 

口 倾斜 (0 Skew ) 一 一 使 元 素 变形 ， 顶 边 清 回 一 个 方向 ， 底 边 滑 癌 相反 的 方向 。 











15.1 旋转、 平移、 缩放 和 倾 侄 ” 325 





旋转 平移 缩放 倾 料 


rotate(30deg); translate(40px, 20px); scale(0.8); skew (1l15deg); 
图 15-1 四 种 基本 变换 类 型 ( 虚线 框 代表 元 系 的 初始 位 置 ) 


每 种 变换 都 使 用 相应 的 函数 作为 transform 属性 的 值 。 我 们 新 建 一 个 简单 的 示例 ， 在 浏览 
帮 中 试 试 。 这 是 一 张 带 图 文 的 卡片 (如 图 15-2 所 示 )， 我 们 对 其 使 用 变换 效果 。 





图 15-2 应 用 了 旋转 变换 的 简单 卡片 
新 建 一 个 页 面 和 一 张 样 式 表 ， 把 它们 关联 起 来 。 添 加 代码 清单 15-1 中 的 HTML。 


代码 清单 15-1 创建 一 张 简 单 卡片 


<div class="card"> 
<img src="images/chickenl1l.jpg" alt="a chicken"/> 
<h4>Mrs. Featherstone</h4> 
<p> She may be a bit frumpy, but Mrs Featherstone gets the job done. She 
lays her largish cream-colored eggs on a daily basis. She is gregarious 
to a fault.</p> 


<p>This Austra White is our most prolific producer.</p> 
</div> 


接 下 来 在 样式 表 中 添加 代码 清单 15-2 中 的 CSS， 其 中 包含 了 一 些 基 础 样式 、 颜 色 设置 和 应 
用 了 旋转 变换 的 卡片 样式 。 
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代码 清单 15-2 设置 卡片 样式 并 使 用 变换 
body { 
background-color: hsl(210, 80%, 20%); 
font-family: Helvetica, Arial, sans-serif; 


| 


1 可 1 
max-width: 100%; 
} 


.Card { 


padding: 0.5em; 使 卡片 居中 


margin: 0 auto; 

background-color: white; 

max-width: 300px; 使 卡片 向 右 

trangstform: rotateéeltl5dey); 旋转 15 度 
} 


在 浏览 右 中 加 载 页 面 , 我 们 就 可 以 看 到 旋转 后 的 卡片 。 通 过 这 个 小 实验 , 或 多 或 少 能 感受 到 
rotate() 国 数 的 表现 。 使 用 负 角 度 可 以 使 卡片 问 左 旋转 司 区 营区 GEaEe 0deg) )。 

接 下 来 可 以 尝试 使 用 其 他 也 数 修改 变换 类 型 。 使 用 下 面 的 这 些 值 ， 并 观察 它们 的 行为 。 

口 skew (20deg) 一 一 使 卡片 倾斜 20 度 。 试 试 负 角度 ， 让 卡片 向 其 他 方向 倾斜 。 

口 scale(0.5) 一 一 将 卡片 缩小 至 初始 大 小 的 一 半 。scale () 函数 需要 一 个 无 单位 的 数值， 

小 于 1 表示 要 缩小 元 素 ， 大 于 1 表示 要 放大 元 素 。 
D translate (20px，40px) 一 一 使 元 素 问 右 移动 20px， 问 下 移动 40px。 同 样 ， 也 可 以 使 
用 人 负 值 使 元 素 癌 相反 的 方 癌 变换 。 

使 用 变换 的 时 候 要 注意 一 件 事 情 ， 虽 然 元 系 可 能 会 被 移动 到 页 面 上 的 新 位 置 , 但 它 不 会 脱离 
文档 流 。 你 可 以 在 屏 帮 范 围 内 以 各 种 方式 平移 元 素 ， 其 初始 位 置 不 会 被 其 他 元 素 占 用 。 当 许 转 某 
元 素 的 时 候 ， 它 的 一 角 可 能 会 移出 屏幕 边缘 ， 同 样 也 可 能 会 遮 住 劳 边 其 他 元 素 的 部 分 内 容 〈 如 
图 15-3 所 示 )。 
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Se a ‘atherstone gets the job done. She 
s her largish cream-colored eggs on 


aily basis. She is gregarious to a 


Mustra White is our most prolific 
producer. 








图 15-3 ”变换 元 素 不 会 导致 其 他 元 素 移动 ， 因 此 可 能 出 现 重 三 
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某 些 情况 下 ， 为 变换 元 素 或 者 所 有 元 素 设 置 较 大 的 外 边 距 ， 有 助 于 避免 不 必要 的 重 羞 


告 变换 不 能 作用 在 <span> 或 者 <a> 这 样 的 行内 元 素 上 。 若 确实 要 变换 此 类 元 素 ， 要 
改变 元 素 的 Qisplav 属性 ,替换 掉 inline (比如 inline-block),， 要 么 把 元 素 改 
为 弹性 子 元 素 或 者 网 格 项 目 (为 父 元 素 应 用 display: flex 或 者 display: grid)。 


入 路 


15.1.1 更 改变 换 基 点 


变换 是 围绕 基点 (point of origin ) 发 生 的 。 基 点 是 旋转 的 轴 心 ， 也 是 缩放 或 者 倾斜 开始 的 地 
方 。 这 就 意味 着 元 素 的 基点 是 固定 在 某 个 位 置 上 ,元 素 的 剩余 部 分 围绕 基点 变换 (但 translate () 
是 个 例外 ， 因 为 平移 过 程 中 元 素 整体 移动 )。 

默认 情况 下 ， 基 点 就 是 元 素 的 中 心 ， 但 可 以 通过 transform-origin 属性 改变 基点 位 置 。 
图 15-4 展示 了 一 些 于 绕 不 同 基 点 变换 的 元 素 。 




















围绕 右 下 角 旋 转 围绕 右上 角 缩 放 围绕 左上 角 倾斜 
图 15-4 ”使 用 元 素 上 不 同 的 角 作 为 基点 发 生 的 旋转 、 缩 放 和 倾斜 











左 侧 的 元 系统 基点 旋转 ， 其 基点 设置 为 transform-origin: right bottom; 中 间 的 元 
素 问 大 基点 (zight top ) 缩放 ; 右 侧 元 素 的 倾斜 方式 是 ， 基 点 (Left top ) 保持 不 动 ， 元 素 
其 他 部 分 回 远 处 延伸 。 

基点 也 可 以 指定 为 百分比 ， 从 元 素 左上 角 开 始 测量 。 下 面 的 两 句 声明 是 等 价 的 。 


transform-origin: right center.,; 
transform-origin: 100% 50%; 





说 明 也 可 以 使 用 px、em 或 者 其 他 单位 的 长 度 值 来 指定 基点 。 按 照 我 的 经 验 ， 使 用 
top、right、bottom、left 和 center 这 些 关键 字 ， 在 大 部 分 项 目 中 就 够 用 了 


15.1.2 ”使 用 多 重 变 换 


可 以 对 transform 属性 指定 多 个 值 ， 用 空格 隔 开 。 变 换 的 每 个 值 从 丰 回 左 按 顺 序 执行 ， 比 
如 我 们 设置 tramnstorm: TOELAate(lSsded) troanslate(lSsoxy. OO) 元 素 会 完 癌 右 平移 1SpxX, 
然后 顺 时 针 旋 转 15 度 。 按 照 代 码 清单 15-3 编辑 样式 表 。 
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代码 清单 15-3 ”使 用 多 种 变换 


.Card { 
padding: 0.5em; 
margin: 0 auto; 


background-color: white; 向 右 平移 20px, 然后 
max-width: 300px; 顺 时 针 旋转 15 度 
translate(20px, 0); 


transform: rotate(15deg) 


lL 


最 简单 的 查看 这 种 效果 的 方法 就 是 打开 浏览 硕 的 开发 者 工具 , 实时 修改 属性 值 , 看 它们 是 如 
何 影 响 元 又 的 。 注意 修 改 translate() 的 值 的 时 候 , 元 素 好 像 是 沿 着 一 个 倾斜 的 坐标 轴 在 移动 ， 
而 不 是 正常 的 方 回 。 这 是 因为 旋转 发 生 在 平移 之 后 。 

理解 起 来 可 能 有 点 儿 困 难 。 通 常 把 translate() 放 在 最 后 执行 (在 transform 代码 顺序 
中 需要 放 在 首位 )， 这 样 可 以 使 用 正常 的 上 /个 、 左 / 右 坐 标 系 ， 操 作 更 简便。 把 代码 顺序 调整 为 
transform: translate(20px, 0) rotate(l1l5deg), 可 以 查看 具体 效果 。 


15.2 ”在 运动 中 变换 


变换 本 身 不 具备 太 多 实用 性 。 虽 然 使 用 了 skew() 的 盒子 可 能 看 上 去 很 有 趣 , 但 不 适 于 阅读 。 
当 和 动作 结合 起 来 使 用 的 时 候 ， 变 换 就 会 有 用 多 了 。 

我 们 来 创建 一 个 实践 这 种 用 法 的 新 页 面 。 图 15-5 展示 了 将 要 实现 的 页 面 截图 。 我 们 会 为 页 
面 添 加 很 多 动作 。 























The Yolk Factory 


Hen Solo Cluck Norris 
Ms, eetnersione Though the most recent addition to our Every brood has its brawler. Cluck 
flock, Hen Solo is a fast favorite among Norris is our feistiest hen, frequently 
our laying brood. She is a sassy and picking fights with other hens about 
suspicious hen; we frequently have to laying territory and foraging space. Her 
follow her to find where she has hidden sister hens continue to hope that she 
her loot from the other hens,. (eventually) and focus her strength 


This Austra White is our most prolific ， : of will for good. 
producer This Snowy Easter Egger lays in 

delicate shades of blue and green. A This Buff Chantecler is as robust and 
full dozen of her eggs costs an hardy as her Canadian forebears, laying 
additional $2. through the coldest parts of the winter. 


She may be a bit frumpy, but Mrs 
Featherstone gets the job done. She 
lays her largish cream-colored eggs on 
a daily basis. She is gregarious to a fault. 





图 15-5 左 侧 的 导航 图 标 将 包含 几 个 变 换 和 过 渡 效 果 
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本 节 我 们 会 实现 左 侧 的 导航 末 单 。 最初， 采 单 只 有 四 个 纵向 排列 的 图 标 ; 鼠标 一 县 停 ， 沫 单 
文字 就 出 现 了 。 这 个 示例 包含 多 个 过 渡 和 一 对 变换 。 我 们 先 来 实现 页 面 ， 然 后 进一步 全 究 导航 沫 
单 (在 第 16 草 中 ， 我 们 会 实现 中 间 主 区 域 的 卡片 部 分 ， 并 为 其 添加 更 多 的 变换 和 动画 效果 )。 

新 建 页 面 和 名 为 style.css 的 样式 表 ， 添 加 代码 清单 15-4 中 的 标记 。 代 码 中 包含 了 一 个 链接 ， 
指向 谷歌 字体 API 提供 的 两 款 Web 字体 ( Alfa Slab One 和 Raleway )。 代 码 中 还 包括 网 页 头 部 和 
导航 末 单 。 


代码 清单 15-4 ”在 运动 中 变换 的 页 面 标记 
<!ldoctype htmil> 
<html lang="en"> 
<head> 
<title>The Yolk Factory</title> 
<link 
href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway'" 
rel="stylesheet"> 








<link rel="stylesheet" href="style.css"> 为 页 面 添 加 Alfa Slab One 
了 Heads 和 Raleway 两 款 字 体 
<body> 
<header> 
<h1 class="page-header">The Yolk Factory</hi1> 
</header> 


<nav Class="main-nav"> 
<ul class="nav-links"> 
<11i> 
<a href="/"> 
<img src="images/home.svg" class="nav-links icon"/> 
<span class="nav-links label">Home</span> 
</a> 
</11i> 
<11i> 
<a href="/events"> 
<img src="images/calendar.svg" class="nav-links icon"/> 
<span class="nav-links label">Events</span> 


</a> 
每 个 导航 链接 都 和/ li> 
包含 一 张 图 片 和 i 


<a href="/members"> 
<img src="images/members.svg" class="nav-links icon"/> 
<span class="nav-links label">Members</span> 

</a> 


一 Ar 
一 个 标签 





< /TIL> 
< 了 工 > 
<a href="/about"> 
<img src="images/star.svg" class="nav-links icon"/> 
<span class="nav-links label">About</span> 
</a> 
</11i> 





</ul> 
</nav> 
</body> 
</html> 
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nav 元 系 包 含 了 这 上 段 代 码 中 的 大 部 分 内 容 ， 其 中 有 个 链接 的 无 序列 表 ( <ul> )。 每 个 链接 都 
由 一 个 图 标 图 片 和 一 个 文本 标签 组 成 。 注 意 ， 这 里 的 图 标 图 片 是 SVG 格式 。 后 面 你 会 发 现 这 很 
重要 ， 到 时 候 会 在 第 16 章 为 页 面 添 加 更 多 内 容 。 





SVG Scalable Vector Graphics 的 简称 ， 可 缩放 矢量 图 形 。 这 是 一 种 基于 XML 
的 图 片 格式 , 使 用 向 量 定义 图 片 。 因 为 图 片 是 使 用 数学 计算 米 定 义 的 ， 所 以 可 以 放 





大 或 缩小 到 任意 尺寸 。 绝 大 部 分 浏览 器 支持 SVG。 








接 下 来 我 们 添加 一 些 基 础 样式 ， 包括 到 景 靳 变 和 标题 区 域 的 内 边 距 ,同时 也 为 页 面 引 入 Web 
字体 。 复 制 或 者 添加 代码 清单 15-5 到 样式 表 。 这 些 只 是 基础 样式 和 网 页 头 部 ， 沫 单 部 分 的 布局 
后 面 再 说 。 


代码 清单 15-5 ”基础 样式 和 标题 样式 
html { 
box-sizing: border-box; 


: :before, 
EE 
box-sizing: inherit; 


} 


光 XA 光一 


body { 
background-color: hsl(200, 80%, 30%); 
background-image: radial-gradient (hsl1l (200, 80%, 30%$), 洪林 他 北星 站 FE 评 
hsl(210, 80%, 20%)); 深 监 色 育 景 新 变 


Color: white; 
font-family: Raleway, Helvetica, Arial, sans-serif,; 
line-height: 1.4; 


margin: 0; 

min-height: 100vh; 确保 body 元 素 填 满 整 个 视窗 ， 
} 这 样 渐变 就 会 填 满 屏幕 
省 本 区 sD 

font-family: Alfa Slab One, serif,; 

font-weight: 400; 
} 


main { 
display: block; 
} 


a 
max-width: 100%; 
} 


人 在 移动 视窗 上 为 头 党 


margin: 0; rs | 
ee 设置 稍 小 的 内 边 距 


} 
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@Qmedia (min-width: 30em) { 


.page-header { 在 较 大 的 屏幕 上 为 头 守 


padding: 2rem 2rem 3rem; La 了 
设置 稍 大 的 内 边 距 


} 


这 个 示例 用 到 了 前 面 章节 里 的 很 多 概念 。body 元 素 的 背景 使 用 了 径 向 渐变 ， 可 以 为 页 面 增 
加 一 点 立体 感 (Opera Mini 浏览 磊 不 支持 径 问 渐变 ，background-color 为 } 其 提供 了 备用 值 )。 
Web 字体 Alfa Slab One 应 用 在 标题 上 ， Raleway 用 在 正文 主体 。 网 页 涉 部 通过 媒体 查询 设置 了 啊 
应 式样 式 ， 在 屏幕 太 寸 允许 的 情况 下 添加 更 大 的 内 边 距 。 
要 实现 菜单 需要 分 成 几 个 步 又 。 首 先 完 成 荣 单 的 布局 ， 然 后 设置 一 些 啊 应 式 行 为 。 我 们 将 采 
用 移动 优先 的 实现 方案 (参见 第 8 章 )， 从 小 屏幕 开始 。 标 题 和 荣 单 看 起 来 应 该 如 图 15-6 所 示 。 














The Yolk Factory 


们 HOME EVENTS 2 MEMBERS Tr ABOUT 





图 15-6 “导航 菜单 的 移动 设计 


鉴于 小 屏幕 上 导航 链接 按 水 平方 回 排列 ， 使 用 Flexbox 比较 合适 。 我 们 对 弹性 容 需 设置 
justify-content: sbace-between， 这 样 导 航 项 目 可 以 平均 地 分 配 页 面 宽度 。 接 下 来 我 们 设 
置 字体 颜色 和 图 标 对 齐 。 把 代码 清单 15-6 添加 到 样式 表 。 


代码 清单 15-6 ”导航 沫 单 链 接 的 移动 样式 
.nav-links { 


display: flex; \ 使 用 Flexbox 在 屏幕 水 平 





ee space-between; 方向 上 展开 导航 项 目 
margin-top: 0; 
margin-bottom: lrem; 
padding: 0 lrem; 
list-style: none; 
} 
.nav-links > 11 + 11 f{ 
margin-left: 0.8em; 





} 

.nav-links > 1i1 >a { 
display: block; 
padding: 0.8em 0; 
Color: white; 





font-size: 0.8rem; 
text-decoration: none; 二 
为 链接 文本 
text-transform: upPpPercase; 
letter-spacing: 0.06em; 深 加 样式 
} 
.nav-links icon { 
height: 1.5em; 
width: 1.5em; 





-大 
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vertical-align: -0.2em; 
} 把 图 标 向 下 稍微 移动 ， 
.nav-links > 11 > a:hover { 与 文本 标签 对 齐 


COLor: hsl1l(40, 100%, 70%); 
} 


在 小 屏 作 上 及 单 束 是 这 样 了 , 但 在 较 大 的 屏 禹 上 , 我们 可 以 添加 更 多 的 特效 。 对 于 蝎 面 布局 ， 
可 以 使 用 固定 定位 使 菜单 保 徘 在 屏 硕 左 侧 ， 效果 看 上 去 如 图 15-7 所 示 。 





MEMBERS 


ABOUT 











图 15-7 ”大 屏幕 上 导航 菜单 停靠 在 屏幕 左 侧 


这 个 亲 单 由 两 个 模块 构成 , 前 面 已 经 为 外 层 元 素 命名 为 main-nav, 内 层 结构 命名 为 nav-links。 
main-nav 用 作 容 大， 问 定 在 左 侧 ， 它 还 提供 了 深 色 背 景 。 我 们 来 实现 一 下 。 

添加 代码 清单 15-7 到 样式 表 中 , 注意 第 二 个 媒体 查询 及 其 内 容 要 放 在 已 有 的 nav-1links 样 
式 后 面 ， 这 样 才 可 以 在 必要 时 覆盖 掉 移 动 样式 。 


代码 清单 15-7 “在 大 屏幕 上 国定 荣 








0 30em) { 仅 在 大 中 型 屏幕 
: 上 应 用 样式 


position: fixed; 


top: 8.25rem; a 
left: 0; 确保 导航 显示 在 网 页 


z-index: 10; 后 续 新 增 内 容 的 前 面 


background-color: transparent,; 六 
开始 时 保持 背景 


transition: background-color .5s linear; 


border-top-right-radius: 0.5em; 颜色 透明 
border-bottom-right-radius: 0.5em; 、 四 
为 背景 颜色 添加 
过 渡 效果 


.main-nav:hover { 
background-color: rgba(0, 0, 0, 0.6); 


} 为 鼠标 悬 停 状 态 设置 
} 深 色 半 透明 背景 
/* 。。。 */ 


@media (min-width: 30em) { ee 
黎 盖 移动 样式 中 的 Flexbox， 


.nav-links { % 
display: block; 使 链接 纵向 排列 
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padding: lem; 
margin-bottom: 0; 

} 

.nav-links > 1i1 + 11 { 
margin-left: 0; 

} 

.nav-links label { 
margin-left: lem; 

} 

} 


position: fixed 声明 把 亲 单 放 入 并 固定 在 一 个 位 置 , 页 面 深 动 也 不 会 受到 影响 。 display : 
block 规则 有 覆盖 掉 移 动 样式 中 的 display : flex， 使 得 菜单 项 合 放 在 一 起 。 

现在 我 们 开始 处 理 过 渡 和 变换 效果 。 需 要 完成 以 下 三 件 事 情 。 

(1) 鼠标 划 过 链接 的 时 候 ， 放 大 图 标尺 寸 。 

CO) 隐藏 链接 标签 ， 当 用 户 使 用 鼠标 葵 集 在 菜单 上 时 , 让 它们 通过 淡 入 过 渡 特 效 全 部 显示 出 来 。 

(3) 使 用 平移 为 链接 标签 添加 “用人 ”效果 ， 与 淡 和 一 起 使 用 。 

下 面 我 们 来 一 一 实现 。 











15.2.1 放大 图 标 


看 导航 链接 的 结构 ( 如 下 代码 所 示 )。 每 个 列表 元 素 都 包含 一 个 链接 ( <a> )， 链 接 中 包含 一 
个 图 标 和 一 个 标签 。 


<11i> 
<a href="/"> 
<img src="images/home.svg" class="nav-links icon"/> 
<span class="nav-links label">Home</span> 





</a> 
</11i> 
说 明 列表 子 元 素 要 与 父 元 素 <ul> 组 合 在 一 起 使 用 ， 因 此 体积 会 较 大 一 些 ， 比 预想 中 
的 模块 谱 套 得 更 深 。 我 有 考虑 把 它们 拆 分 成 较 小 的 模块 ， 但 眼下 需要 把 它们 放 在 一 起 ， 
以 便 整 体 设 置 特效 。 
我 们 先 来 实现 鼠标 悬 停 时 放大 岁 标 。 需 要 用 到 缩放 变换 ， 然 后 添加 过 渡 歼 果 , 这 样 可 以 使 变换 
过 程 变 得 平滑 。 如 图 15-8 所 示 ， 鼠 标 悬 停 在 Events 菜单 项 的 日 历 图 标 上 , 该 图 标 会 稍微 放大 一 些 。 




















HOME 从 HOME 


国 EvENTS 


MEMBERS S22 MEMBERS 


ABOUT YABOUT 





图 15-8 正常 的 图 标 大 小 ( 左 ); 鼠标 悬 停 时 图 标 放大 【〈 碳 ) 
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Events 的 图 标 设置 过 宽度 和 高 度 ， 因 此 我 们 可 以 通过 增 大 这 些 属性 来 放大 它 。 但 是 ， 当 重新 
计算 文档 流 时 ， 这 将 导致 其 周围 的 一 些 元 桑 跟着 移动 。 

如 果 改 用 变换 ,， 那 周围 的 元 素 不 会 受到 影响 ，Events 标签 也 不 会 向 右 移 动 。 按 代码 清单 15-8 
更 新 CSS， 为 悬 停 或 者 激活 状态 下 的 元 素 添 加 这 种 效果 。 
代码 清单 15-8 ”图标 链接 在 鼠标 悬 停 或 者 激活 状态 下 ， 图 标 会 放大 


@Qmedia (min-width: 30em) { 


























.nav-links { 
display: block; 
padding: lem; 
margin-bottom: 0; 

} 


.nav-links > 11 + 11i f{ 





margin-left: 0; 
} 


.nav-links label { 





margin-left: lem; 


} 


.nav-links icon ({ 为 transform 属性 


transition: transform 0.2s ease-out; 添加 过 渡 


} 


.nav-links a:hover > .nav-links icon, 


-link 5 2 -link i ; 一 
nav-links a:focus > .nav-links_ icon { 增 大 图 标尺 十 


transform: scale(1.3); 
} 
} 


现在 ， 如 采 你 用 鼠标 划 过 沫 单项 ,你 将 看 到 相应 的 图 标 会 变 大 一 些 ， 带 助 用 户 确 认 正 在 悬 停 
的 菜单 项 。 我 特意 使 用 SVG 图 片 资源 ， 这 样 图 片 尺寸 变化 时 就 不 会 出 现 像素 颗 粕 或 者 其 他 奇 芭 
的 失真 。scale () 变换 是 实现 此 需求 的 绝 佳 方法 。 








SVG: 一 种 更 好 的 图 标 解决 万 案 

图 标 在 某 些 设计 中 是 非常 重要 的 一 部 分 ,图 标的 使 用 技巧 也 一 直 在 进化 ,很 长 一 段 时 间 里 ， 
图 标 使 用 的 最 佳 实践 是 把 所 有 图 标 放 入 单个 图 片 文件 ， 称 之 为 精灵 图 ( sprite sheet )。 然后 使 用 
CSS 背景 图 片 ， 小 心 翼 愤 地 调整 尺寸 和 背景 位 置 ， 在 元 素 中 显示 精灵 图 上 的 图 标 。 

后 来 ， 图 标 字 体 〈icon fonts ) 开始 流行 起 来 。 这 种 解决 方案 不 再 把 图 标 误 入 精灵 图 ， 而 是 
把 每 个 图 标 都 作为 字符 放 入 自 定 义 的 字体 文件 。 通 过 使 用 Web 字体 ， 单 个 字符 将 被 泻 染 成 图 
标 。 这 样 的 服务 类 似 于 Font-Awesome， 提 供 了 几 百 个 常见 的 图 标 ， 图 标 使 用 变 得 非常 简单 。 

以 上 这 些 技术 还 在 使 用 ， 但 我 还 是 建议 你 使 用 SVG 图 标 。SVG 功能 更 强大 ， 性 能 更 好 。 
SVG 可 以 作为 <img> 源 使 用 ， 本草 就 这 么 用 过 , 但 SVG 还 有 其 他 用 法 。 | 建 SVG 精 
灵图 ， 而 且 因为 SVG 是 基于 XML 的 文件 格式 ， 所 以 可 以 直接 在 HTML 中 使 用 它 。 例 如 如 下 
代码 所 示 。 


1$.2 ”在 运动 中 变换 335 


<]1> 
< 和 且 refES0 /VS 
sce en ne mle el el Eos 
.00 
<oatEn £1ill="EEEEEEY =INMIi9.871 12.1651=8.829-9.7586--0.274=0.303= 
0.644-0.47-1.042-0.47-0 0 00 0 0-0.397 0-0.767 0.167-1.042 
0,.471=8.,.829 9.758c6-0.,.185 0.205-=0.169 0.521 0.035 0.706 0.096 
-087 0.216 0.129 0.335 0.129 0,.136 0 0.272-=-0.055 0.371- 
.16512.129=2.353V8.01i8c0 0.827 0.673 1.5 1.5 1.5nilie0,.827 0 下 .5= 
-G673 1.5-1,.5Y-8,.01812.,129 2.,35360.,185 0.205 0.501 0.22]1 0.706 
.03580.221=0.501 0.035-=0.7062MIiI2 19m=4V=4.,.560=0.276 0.224-=0.5 
5=0.5n3GC0.276 0 0.5 0.224 0 Ve 00 0 
.5-0.5 0.5h-=2.5v-4.5c0-0.827-0.673-1.5-1.5-1.5h-3c-0.827 0=1.5 
673 |S5Y1.S5v4.5h 2-5C@ 0%.276%0 05 0.224 0%5 O05vy 912315.7/ 
.360 .082-0.091 0.189-0.141 0.3-=0.14180.218 0.050 0.3 0.14115.7 
6.3V9.1232"></Datn> 
RS 


ON ND © OD 低 


<span class="nav-links label">Home</span> 
/a 
</l11i> 


如 果 有 需要 ， 也 可 以 直接 对 SVG 的 部 分 中 使 用 CSS。 使 用 正常 的 CSS 就 可 以 动态 地 改变 
SVG 中 不 同 部 分 的 颜色 ， 甚 至 改变 大 小 和 位 置 。 同 时 SVG 的 文件 体积 更 小 ， 因 为 它 不 同 于 
GIF、PNG 这 些 像素 化 的 图 片 或 者 其 他 基于 光栅 的 图 片 格式 。 

如 果 你 不 太 熟 悉 SVG， 可 以 查看 css-tricks 网 站 的 文章 Usinge SVG， 其 中 介绍 了 在 Web 页 
面 中 使 用 SVG 的 多 种 方式 ， 是 个 不 错 的 入 门 资 料 。 


现在 图 标 看 上 去 可 以 了 ， 我 们 接 下 来 把 注意 力 转向 它们 劳 边 的 标签 。 


15.2.2 创建 “ 飞 入 ”的 标签 


琳 单 的 标签 没有 必要 一 生 保持 可 见 状态 。 默认 情况 下 可 以 把 它们 隐藏 ,只 在 相应 位 置 保留 
标 , 告诉 用 户 亲 单 的 位 置 。 ei 再 把 标签 pe 
示 出 来 。 这样 的 话 ， 用户 的 鼠标 一 徘 近 图 标 ， 整 个 菜单 就 显现 了 。 这 个 过 程 中 一 次 性 使 用 了 多 种 
特效 ， 背 景 和 标签 都 使 用 了 淡 入 ， 标 签 从 它们 最 终 位 置 侦 左 一 ii 才 渡 〈 如 图 15-9 扬 `、)。 











EVENTS 


MEMBERS 


ABOUT 
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整个 特效 中 ， 标签 需 要 同时 使 用 两 个 不 同 的 过 渡 效 果 : 一 个 针对 透明 度 ， 男 一 个 针对 
translate() 变换 。 参 照 代 码 清单 15-9 中 列 出 的 代码 ， 更 新 样式 表 中 的 相应 部 分 。 


代码 清单 15-9 ”nav-item 标签 上 的 过 渡 
Gmedqla (min-width: 30em) { 
.nav-links { 
display: block; 





padding: lem; 


margin-bottom: 0; 把 标签 设置 为 行内 块 级 元 素 ， 这 样 
} 就 可 以 对 其 使 用 变换 效果 了 


.nav-links > 11 + 11i f{ 





margin-left: 0; 
} 
开始 时 隐藏 标签 
.nav-links label { 
display: inline-block; 
margin-left: lem; 


padding-right: lem; 使 标签 向 左 





opacity: 0; 移动 1em 


transform: translate(-1lem); / 为 要 改变 的 属性 
transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3， 1.3) 值 添 加 过 渡 
opacity 0.4s linear; 
} 
.nav-links:hover .nav-links label, 
.nav-links a:focus > .nav-links_ label f 鼠标 悬 停 或 者 激活 状态 下 ， 设 置 标签 
opacity: 工 ， 可 见 ， 并 把 它 移动 回 正确 的 位 置 


transform: translate(0); 


上 


.nav-links icon ({ 


柱 = 


transition: transform 0.2s ease-out; 


} 


.nav-links a:hover > .nav-links icon, 





nav- links avtoeus > nav- linke eon 1 
transform: scale(1.3); 
} 
} 
菜单 只 占 了 屏 大 的 一 小 部 分 , 但 实际 上 有 很 多 内 容 。 其 中 有 些 沫 单 选 择 需 相当 长 , 并 且 很 复杂 。 
注意 , 我 们 刚刚 是 把 :nover 伪 类 添加 在 了 顶层 的 nav-1Links 元 素 上 , 而 :focus 伪 类 是 加 
到 了 内 部 的 <a> 元 素 上 〈focus 一 般 只 能 应 用 于 链接 或 者 按钮 等 特定 元 系 )。 这 样 所 有 标签 就 可 以 
在 鼠标 划 过 时 都 显示 出 来 。 除 此 之 外 ， 如 果 用 户 使 用 键盘 上 的 Tab 健 , 被 激活 的 单个 标签 也 会 显 
示 出 来 。 
隐藏 状态 下 ， 标 签 使 用 translate() 问 左 移动 了 1em。 在 淡 入 时 ， 它 过 渡 回 了 实际 位 置 。 
这 里 的 translate() 拯 数 省 略 了 第 二 个 参数 ， 只 指定 了 x 值 ， 这 样 就 只 发 生 水 平 位 移 。 因 为 我 
们 不 需要 元 系 上 下 移动 ， 所 以 这 没有 问题 。 
目 定 义 的 cupic-pezier() 图 数 也 值得 好 好 看 看 。 它 产生 了 一 个 弹跳 特效 : 标签 辣 右 移动 
时 ， 超 出 了 停止 位 置 ， 然 后 再 回 到 最 终 位 置 售 下 来 。 运 劲 曲线 如 图 15-10 所 示 。 
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时 间 一 
图 1$-10 ”在 终点 添加 弹跳 特效 的 贝 塞 尔 曲 线 


你 会 发 现 曲线 超出 了 盒子 的 顶端 , 这 就 意味 着 值 超过 了 过 渡 的 最 终 值 。 从 translate (-1lem) 
到 translate (0) 的 过 渡 中 ,标签 的 变换 会 短暂 地 到 达 一 个 超出 最 终 位 置 大 概 0.15em 的 值 ， 然 
后 再 绥 缓 回 到 最 终 位 置 。 同 样 ,， 我们 也 可 以 在 定时 子 数 的 开始 添加 弹跳 效果 ， 即 把 第 一 个 控制 柄 
移动 到 低 于 盒子 底部 。 然 而 过 渡 曲 线 是 不 可 能 超出 左右 两 侧 边缘 的 ， 这 不 合 逻 辑 。 

在 浏览 硕 中 加 载 页 面 ， 查 看 过 渡 是 如 何 运 行 的。 弹跳 过 程 一 内 而 过 ,你 可 能 需要 调 慢 过 渡 时 
间 来 更 好 地 观察 它 ， 这 样 看 上 去 像 是 增加 了 标签 的 重量 和 动力 ， 运 动 过 程 显得 更 目 然 。 











15.2.3 ”交错 显示 过 渡 

现在 的 菜单 看 上 去 非常 好 , 我 们 最 后 再 做 一 次 优化 , 让 它 更 加 精致 。 我们 会 用 到 transition- 
delay 属性 , 为 每 个 菜单 项 设置 不 同 的 延迟 时 间 。 这 样 就 可 以 使 每 段 动画 交错 飞人 显示 , 不 再 一 
次 性 全 部 展示 出 来 ， 就 像 翻 滚 的 “波浪 ”( 如 图 15-11 所 示 )。 

















图 15-11 顶部 的 沫 单项 会 早 于 下 面 的 元 素 飞 人 
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要 实现 这 种 效果 , 我 们 将 使 用 :nth-chila() 伪 类 选择 句 ,， 根 据 每 个 菜单 项 在 列表 中 的 位 置 
选中 它们 ， 然 后 分 别 为 每 个 元 素 设 置 连续 变 长 的 过 渡 延 迟 。 把 代码 清单 15-10 中 的 代码 添加 到 样 
式 表 中 ， 放 在 其 他 nav-1links 样式 后 面 。 


代码 清单 15-10 “为 菜单 项 添加 交错 的 过 渡 延 迟 














.nav-links:hover .nav-links label, 选中 第 二 个 菜 
人 单项 的 标签 
~ 小 
opacity: 1; 
transform: translate(0).; 为 过 渡 设 置 0.1s 
/又 
} \ 
和 3 正 j 尺 

.nav-links > li:nth-child(2) .nav-links label { 的 延迟 

transition-delay: 0.1s; Nm 

选中 第 三 个 菜单 

} A 
.nav-links > li:nth-child(3) .nav-links label { 项 的 标签 

transition-delay: 0.2s:; 为 过 渡 设 置 0.2s 
: z z z 的 延迟 
.nav-links > li:nth-child(4) .nav-links label { 

transition-delay: 0.3s; 视 需 求情 况 
} 重复 设置 
.nav-links > li:nth-child(5) .nav-links label { 

transition-delay: 0.4s; 





} 


:nth-child(2) 选 择 希 选中 了 列表 中 的 第 二 个 元 素 ， 然 后 我 们 为 其 添加 轻微 延 民 。 第 三 个 
元 素 ( :nth-childq(3) ) 设置 了 稍 长 一 点 的 延迟 ， 第 四 个 和 第 五 个 元 素 分 别 再 长 一 点 。 我 们 不 
需要 为 第 一 个 元 素 操 心 ， 因 为 我 们 希望 它 的 过 渡 立 即 开始 ， 不 需要 设置 过 渡 延 迟 。 

在 浏览 需 中 运行 页 面 ， 使 用 鼠标 划 过 沫 单 查看 效果 。 整 个 沫 单 显 得 流畅 生动 。 鼠 标 移 开 时 ， 
所 有 元 素 以 同样 的 交错 顺序 淡出 。 

你 会 发 现 这 种 实现 方式 有 个 缺点 , 那 就 是 荣 单 必须 和 所 写 的 选择 需 数 量 一 样 多 。 我 们 这 里 针 
对 第 五 个 元 素 也 添加 了 规则 , 尽管 当前 菜单 只 有 四 个 元 素 。 这 是 一 种 预防 措施 ， 以 防 将 来 会 再 增 
加 一 个 菜单 项 。 虽 然 安全 起 见 我 们 甚至 可 以 为 第 六 个 元 素 添 加 规则 , 但 需要 意识 到 菜单 数量 总 是 
有 可 能 在 某 个 时 间 点 超出 已 有 规则 的 ， 记 得 到 时 候 在 CSS 中 添加 更 多 的 规则 。 


提示 “类 似 的 重复 代码 块 ， 使 用 预 处 理 器 书写 会 更 简单 一 些 。 相 关 示 例 参 见 附录 B。 


某 单 到 现在 终于 做 好 了 , 接 下 来 可 以 为 页 面 梁 加 更 多 内 容 。 不 过 我 们 匈 放 一 放 ,， 到 下 一 章 再 
继续 实现 。 在 这 之 前 ， 还 有 两 件 和 变换 有 关 的 事情 需要 了 解 。 









































15.3 ”动画 性 能 


有 些 变换 看 上 去 好 像 没 有 存在 的 必要 。 比 如 平移 变换 的 结果 , 通常 也 可 以 使 用 相对 定位 来 实 
现 ; 对 图 片 或 者 SVG 做 缩放 变换 ， 其 实 也 可 以 通过 设置 宽 局 来 完成 ， 这 样 甚至 更 再 观 。 

实际 上 , 变换 在 浏览 硕 中 的 性 能 要 好 得 多 。 如 果 我 们 要 对 元 素 的 定位 使 用 动画 ( 比如 为 1eft 
属性 添加 过 渡 效 果 )， 可 以 明显 感受 到 性 能 很 差 。 对 复杂 元 系 使 用 动画 或 者 在 页 面 内 一 次 性 对 多 
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个 元 素 使 用 动画 ,问题 尤其 明显 。 这 种 性 能 问题 在 过 渡 (参见 第 14 章 ) 和 动画 (第 16 章 将 介绍 ) 
上 都 有 体现 。 

如 果 我 们 要 实现 过 渡 或 动画 , 无论 什 么 类 型 ， 包 括 定位 或 大 小 操作 ,都 应 该 尽 可 能 考虑 使 用 
变换 。 要 理解 为 什么 需要 这 样 做 ， 我 们 需要 先 看 看 浏览 需 是 如 何 泻 染 页 面 的 。 





泻 染 路 径 


广 只 从 计算 好 了 页 面 上 哪些 样式 应 用 于 哪些 元 系 上 之 后 ,需要 把 这 些 样 式 转化 成 屏 硕 上 的 像 
素 , 这 个 过 程 叫 作 泻 染 ( rending ), 演 染 可 以 分 为 三 个 阶段 : 布局 、 绘 制 和 合成 (如 图 15-12 所 示 )。 





布局 绘制 人 区 


图 15-12” 演 染 路 径 上 的 三 个 阶段 


1. 布局 

在 第 一 个 阶段 布局 中 , 浏览 句 需 要 计算 每 个 元 素 将 在 屏幕 上 占 多 大 空间 。 因 为 文档 流 的 工作 
方式 ， 所 以 一 个 元 素 的 大 小 和 位 置 可 以 影响 页 面 上 无 数 其 他 元 素 的 大 小 和 位 置 。 这 个 阶段 会 解决 
这 个 问题 。 

任何 时 候 改 变 一 个 元 素 的 宽度 或 高 度 ， 或 者 调整 位 置 属性 ( 比如 top 或 者 1eft )， 元素 的 
布局 都 会 重新 计算 。 如 果 使 用 JavaScript 在 DOM 中 插 人 或 者 移 除 元 素 ， 也 会 重新 计算 布局 。 一 
日 布局 发 生 改 变 ， 浏览 器 就 必须 重 排 (reflow ) 页 面 ， 重 新 计算 所 有 其 他 被 移动 或 者 缩放 的 元 素 
的 布局 。 


2. 绘制 

布局 之 后 是 绘制 。 这 个 过 程 就 是 填充 像 系 : 描绘 文本 ， 着色 图 片 、 边 框 和 阴影 。 这 不 会 真正 
显示 在 屏幕 上 ， 而 是 在 内 存 中 绘制 。 页 面 各 部 分 生成 了 很 多 的 图 层 (layers )。 

如 采 改 变 某 个 元 素 的 背景 颜色 ， 台 必 须 重 新 绘制 它 。 但 因为 更 改 背景 颜色 不 会 影响 到 页 面 上 
任何 元 素 的 位 置 和 大 小 , 所 以 这 种 变化 不 需要 重新 计算 布局 。 改 变 育 景 颜 色 比 改变 元 素 大 小 需要 
的 计算 操作 要 少 。 

某 些 条 件 下 ， 页 面 元 素 会 被 提取 到 上 自己 的 图 层 。 这 时 候 , 它 会 从 页 面 的 其 他 图 层 中 独立 出 来 
单独 绘制 。 浏 览 融 把 这 个 图 层 发 送 到 计算 机 的 图 形 处 理 硕 〈 graphics processing unit，GPU ) 进行 
绘制 ， 而 不 是 像 主 网 层 那样 使 用 主 CPU 绘制 。 这 样 安排 是 有 好 处 的 ， 因 为 GPU 经 过 了 充分 的 优 
化 ， 比 较 适 合 做 这 类 计算 。 

这 就 是 我 们 经 稼 提 到 的 硬件 加 速 ( hardware acceleration )， 因 为 需要 依赖 于 计算 机 上 的 某 些 
便 件 来 推进 演 染 速度 。 多 个 图 层 就 意味 大 需要 消耗 更 多 的 内 存 ， 但 好 人 处 是 可 以 加 快 演 染 。 


3. 合成 
在 合成 (composite ) 阶段 ,浏览 豆 收 集 所 有 绘制 完成 的 图 层 ,， 并 把 它们 提取 为 最 终 显示 在 屏 
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幕 上 的 图 像 。 合 成 过 程 需 要 按照 特定 顺序 进行 ， 以 确保 图 层 出 现 重 登 时 ， 正确 的 图 层 显 示 在 其 他 
图 层 之 上 。 

opacity 和 transform 这 两 个 属性 如 果 发 生 改变 , 需要 的 泻 染 时 间 就 会 非常 少 。 当 我 们 修 
改元 素 的 这 两 个 属性 之 一 时 ， 浏 览 硕 就 会 把 元 素 提升 到 其 目 己 的 绘制 图 层 并 使 用 GPU 加 速 。 
为 元 素 存 在 于 目 己 的 图 层 , 所 以 整个 图 像 变 化 过 程 中 主 图 层 将 不 会 发 生变 化 ,也 无 须 重复 的 重 绘 。 

如 末 只 是 对 页 面 做 一 次 性 修改 , 那么 通 津 不 会 感觉 出 这 种 优化 可 以 市 来 明显 的 差异 。 但 如 采 
修改 的 是 动画 的 一 部 分 , 屏 攻 需要 在 一 秒 内 发 生 多 达 几 十 次 的 更 新 , 这 种 情况 下 泻 染 速度 就 很 重 
要 了 。 大 部 分 的 屏 希 每 秒 钟 会 刷新 60 次 。 理 想 情 况 下 ， 动 画 中 每 次 变化 所 知 的 重新 计算 也 要 至 
少 这 么 快 , 才能 在 屏幕 上 生成 最 流畅 的 运动 轨迹 。 浏 览 融 在 每 次 重新 计算 的 时 候 需 要 做 的 事情 越 
多 ， 越 难 达到 这 种 速度 。 
































使 用 wi11-change 控制 绘制 图 层 
浏览 器 会 尽 可 能 把 一 些 元 素 划 归 到 不 同 的 图 层 , 这 已 经 在 优化 泻 娄 流程 上 取得 了 明显 的 进 
步 。 如 果 你 对 一 个 元 素 的 transform 或 者 opacity 属性 设置 动画 ， 现 代 浏 览 器 为 了 使 动画 
过 程 更 加 流畅 ， 通常 会 基于 包括 系统 资源 在 内 的 一 系列 因素 , 做 出 最 佳 处 理 , 但 有 时 候 你 可 能 


如 果 碰 到 这 种 情况 ,你 可 以 使 用 一 个 叫 作 will-change 的 属性 对 演 染 图 层 添 加 控制 。 这 
个 属性 可 以 提前 告知 浏览 器 , 元 素 的 特定 属性 将 改变 。 这 通常 意味 着 元 素 将 被 提升 到 自己 的 绘 
制图 层 。 例 如 ， 设置 了 will-change: transform 就 表示 我 们 将 要 改变 元 素 的 transform 
属性 。 

除非 遇 到 性 能 问题 ,否则 不 要 盲目 添加 该 属性 到 页 面 ， 因为 它 会 占用 很 多 的 系统 资源 。 前 
后 测试 一 下 ， 在 性 能 表现 好 时 再 在 样式 表 中 保留 wil1-change。 如 果 想 要 更 加 深入 了 解 该 属 
性 如 何 工 作 和 是 否 应 该 使 用 它 , 可 以 查看 Sara Soueidan 的 优秀 文章 Everything You Need to Know 
About the CSS will-change Property。 

我 发 现 这 篇 文章 发 表 之 后 有 件 事情 发 生 了 变化 ,文中 表示 只 有 3D 变换 会 提升 元 素 到 自己 
的 图 层 ， 现 在 已 经 不 是 这 样 了 ， 最 新 的 浏览 器 对 2D 变换 也 可 以 使 用 GPU 加 速 。 





第 16 草 中 我 们 会 看 到 处 理 过 渡 或 者 动画 的 时 候 ， 尺 量 只 改变 transform 和 OPaCLtY 属 
性 。 如 采 有 需要 ， 可 以 修改 那些 只 导致 重 绘 而 不 会 重新 布局 的 属性 。 只 有 在 没有 其 他 符 代 方案 的 
时 候 ， 青 去 修改 那些 影响 布局 的 属性 ， 并 旦 密切 关注 动画 中 是 否 存 在 性 能 问题 。 如 采 想 要 查看 哪 
些 属性 会 导致 布局 、 绘 制 或 者 合成 ， 可 以 访问 CSS Triggers 网 站 。 











15.4 三 维 (3D) 变换 


目前 为 止 我 们 使 用 过 的 变换 都 是 2D 的 。 这 些 变换 容易 使 用 〈 也 很 常见 )， 因 为 网 页 本 号 就 是 
2D 的 。 但 我 们 不 应 该 被 局 限 在 这 里 ， 旋 转 和 平移 部 可 以 在 三 个 维度 上 实现 : X 轴 、 了 轴 和 Z 轴 。 
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我 们 可 以 像 之 前 那样 使 用 translate () 函数 ， 在 水 平和 垂直 方向 上 平移 (X 轴 和 了 轴 )。 也 
可 以 使 用 translatex() 和 translateYy() 国 数 实现 同样 的 效果 。 下 面 两 条 声明 会 产生 同样 的 
效果 。 


transform: translate(15Px，50PDPXxX) ; 
transform: translatex(15px) translateY (5O0pPx); 


我 们 同样 可 以 使 用 translatez() 函数 实现 Z 轴 上 的 平移 ,相当 于 移动 元 素 使 其 更 徘 近 或 远 
离 用 户 。 同 样 ， 也 可 以 使 元 素 绕 着 三 个 不 同 维度 的 坐标 轴 进 行 旋 转 。 但 和 平移 不 同 的 是 ,我 们 已 
经 非常 席 悉 rotatez () 了 , 因为 rotate() 就 可 以 被 称 为 rotatez(), 它 就 是 绕 着 Z 轴 旋转 的 。 
疯 数 rotatex() 和 rotateY() 分 别 围绕 厦 水 平方 品 上 的 站 轴 (使 元 素 癌 前 或 者 问 后 倾斜 ) 和 重 
直方 加 上 的 了 轴 (使 元 素 问 左 或 者 问 右 转动 或 偏 移 ) 旋转 。 有 关 这 些 男 数 的 说 明 ， 参 见 图 15-13。 








err | 





rotatex(30deg) rotateY(30deg) rotatez(30deg) 


图 15-13 ”使 用 300px 透视 距离 观察 三 个 不 同 坐 标 轴 上 的 旋转 〈 虚线 框 代表 元 素 的 初始 位 置 ) 





15.4.1 控制 透视 距离 


为 页 面 添加 3D 变换 之 前 ， 我 们 需要 先 确 定 一 件 事 情 ， 即 透视 距离 ( perspective )。 变 换 后 的 
元 系 一 起 构成 了 一 个 3D 场景 。 接 着 浏览 希 会 计算 这 个 3D 场景 的 2D 图 像 ， 并 泻 染 到 屏 帮 上 。 我 
们 可 以 把 透视 距离 想象 成 “摄像 机 ”和 场景 之 间 的 距离 ， 前 后 移动 镜头 就 会 改变 整个 场景 最 终 显 
示 到 图 像 上 的 方式 。 

如 采 镜 头 比 较 近 (〈 即 透视 距离 小 )， 那 么 3D 效果 了 驶 会 比较 强 。 如 条 镜头 比较 远 〈 即 透视 距 
离 大 )， 那 么 3D 效果 就 会 比较 弱 。 图 15-14 展示 了 几 种 不 同 的 透视 距离 。 











一 一 一 一 ”一 一 一 一 一 一 一 


一 一 一 一 一 一 一 一 一 一 一 一 一 =- 





rotateY (30deg) perspective (400px) perspective (100px) 
rotateY (30deg) rotateY (30deg) 


图 15-14 不 同 透 视 距 离 下 相同 的 旋转 
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左 侧 这 个 旋转 后 的 元 素 ， 没 有 设置 透视 距离 ， 看 起 来 不 太 像 是 3D 的 。 它 只 是 水 平方 向 上 做 
了 一 些 压缩 ， 没 有 立体 感 。 不 设置 透视 距离 的 3D 变换 看 上 去 像 是 平 的 ,“ 辐 远 处 转 ” 的 那 部 分 
元 素 没 有 显得 变 小 。 中 间 这 个 盒子 ， 设 置 了 400px 的 透视 距离 。 它 的 右 侧 边 ， 即 距离 观察 者 较 远 
的 这 一 侧 ， 显 得 有 点 变 小 , 距离 较 近 的 这 一 侧 看 上 去 变 大 了 一 些 。 右 侧 盒子 设置 了 更 短 的 透视 距 
离 ， 是 100px。 这 样 加 强 了 3D 效 末 ， 元 素 的 边缘 越 远 ， 缩 小 得 越 明 显 。 

可 以 通过 两 种 方式 指定 透视 距离 : 使 用 Se () 变换 或 者 使 用 perspective 属性 。 
两 种 方式 有 些 不 同 , 我 们 通过 一 个 简单 的 例子 来 说 明 。 这 是 个 简化 的 示例 ， 只 用 来 演示 透视 距离 
的 效果 。 

首先 , 我 们 为 四 个 元 素 添加 旋转 效果 , 使 用 rotatex() 让 它们 向 后 倾斜 (如 图 15-15 所 )。 
因为 每 个 元 又 旋转 同样 的 角度 ， 并 且 设 置 了 相同 的 perspective(), 所 以 它们 看 上 去 一 样 。 


图 15-15 ”四 个 元 条 都 围绕 氏 轴 旋转 ， 并 日 都 设置 了 perspective (200px) 
为 这 个 演示 新 建 一 个 页 面 ， 并 复制 代码 清单 15-11 的 HTML。 
代码 清单 15-11 用 来 演示 3D 变换 和 透视 距离 的 4 个 盒 


<div class="row"> 
<div class="box">One</div> 
<div class="box">Two</div> 
<div class="box">Three</div> 
<div class="box">Four</div> 
</div> 


接 下 来 ， 我 们 为 每 个 盒子 添加 3D 变换 和 透视 距离 。 同 时 我 们 也 可 以 为 盒子 填充 一 些 颜色 和 
内 边 距 ， 使 最 终 效果 更 加 明显 。 把 代码 清单 15-12 中 的 代码 添加 到 页 面 的 样式 表 。 


代码 清单 15-12 ”为 盒子 添加 3D 变换 
.ow { 
display: flex; 
Justify-content: center; 


} 








.box { 
box-sizing: border-box; 
width: 150px; 
margin: 0 2em; 


padding: 60px 0; 
text-align: center; 使 盒子 向 后 旋转 30 度 ， 
background-color: hsl(150, 50%, 40%); 并 设置 透视 距离 
transform: perspective(200px) rotatex(30deg); 
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在 当前 示例 中 ， 每 个 盒子 看 上 去 都 相同 。 它 们 都 有 目 己 的 透视 距离 ， 是 用 perspective() 
咀 数 设置 的 。 这 个 方法 可 以 为 单个 元 又 设置 透视 距离 ,示例 中 我 们 直接 为 所 有 盒子 做 了 相同 的 设 
置 。 这 样 就 像 为 每 个 元 素 分 别 单独 拍照 ， 但 是 拍摄 位 置 相同 。 

有 了 时候 我 们 希望 多 个 元 系 共 译 辣 一 套 通 视 距离 ， 就 仿佛 它们 处 于 相同 的 3D 空间 中 。 图 15-16 
用 来 演示 这 种 情况 。 这 里 有 四 个 相同 的 元 系 , 但 它们 都 问 着 远方 的 一 个 相同 的 交汇 点 延 促 ， 就 仿 
佛 把 四 个 元 素 放 一 起 然后 拍摄 一 张 整 体 的 照片 。 要 实现 这 种 效果 ， 需 要 为 它们 的 父 元 系 设 置 


perspective 属性 


pf NN~ 


图 15-16 为 共有 人 祖先 元 素 设 置 perspective 属性 可 以 使 多 个 元 素 共 享 相同 的 透视 距离 


要 查看 这 样 的 效果 , 可 以 移 除 盒子 上 的 perspectivel() 滑 数 , 改 成 为 容 大 添 加 perspective 
属性 。 参 考 代 码 清 单 15-13 中 的 代码 。 


代码 清单 15-13 ”建立 统一 的 透视 距离 

















.TOW { 
display: flex; 
关 PASS 天 
Justify-content: center; 为 容 硬 漆 加 
perspective: 200px; 透视 距离 
} 
.box { 


box-sizing: border-box; 

width: 150px; 

margin: 0 2em; 

padding: 60px 0; 

text-align: center; 不 再 为 盒子 本 身 

background-color: hsl(150, 50%, 40%); 设置 透视 变换 

transform: rotatex(30deg); 
} 


通过 为 父 容 絮 (或 其 他 祖先 元 素 ) 设置 统一 的 透视 距离 ， 父 容 需 包含 的 所 有 应 用 了 3D 变换 
的 子 元 素 ， 都 将 共享 相同 的 透视 距离 。 





< 一 





ee 3D 变换 中 非常 重要 的 部 分 。 如 末 不 J 离 得 远 的 元 素 不 会 显得 
变 小 ， 离 得 近 的 元 素 也 不 会 显得 变 大 。 上 面 的 例子 比较 倘 单 ， 第 16 章 会 把 这 些 扩 术 用 在 一 个 实 


ES 发 和 ”页面 。 
15.4.2 ”实现 高 级 3D 变 换 


对 元 素 进 行 3D 处 理 的 时 候 ， 还 有 其 他 一 些 很 有 用 的 属性 。 我 不 会 占用 太 多 篇 幅 讲解 这 些 属 
性 ， 因 为 在 实际 开发 中 用 到 的 机 会 比较 少 。 下 面 我 们 来 了 解 一 下 这 些 属性 ， 万 一 用 到 也 会 有 些 玫 
助 。 如 果 你 想 更 深入 人 研究 这 些 属性 ， 我 们 也 会 提供 一 些 在 线 的 示例 。 
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1. perspective-origin 属性 

默认 情况 下 ,透视 距离 的 演 染 是 假设 观察 者 ( 或 者 锐 头 ) 位 于 元 素 中 心 的 正 前 方 。 
perspective-origin 属性 可 以 上 下 、 左 右 移动 镜头 的 位 置 。 图 15-17 展示 的 还 是 之 前 的 例子 ， 
但 镜头 移 到 了 左下 方 。 


ae 


添加 代码 清单 15-14 中 的 代码 ， 就 可 以 查看 上 述 效果 。 
代码 清单 15-14 使 用 perspective-origin 移动 镜头 的 位 置 


.TOW { 





display: flex; 


Justify-content: center; 把 镜头 位 置 移动 


erspective: 200px; 和 s 
es we 到 元 素 的 左下 方 
perspective-origin: left bottom; 


lL 


还 是 跟 之 前 一 样 的 透视 距离 , 但 是 视角 变 了 ,所 有 的 盒子 都 移 到 了 观察 者 的 右 侧 。 我 们 可 以 
使 用 关键 字 top、left、bottom、right 和 center 来 指定 位 置 ， 也 可 以 使 用 百分比 或 者 长 度 
值 ， 从 元 素 的 左上 角 开 始 计算 〈 比 如 perspective-origin: 25% 25% )。 


2. backface-visibility 属性 

如 果 你 使 用 rotatex() 或 者 rotateY () 旋 转 元 系 超 过 90 度 ， 就 会 发 现 一 些 有 趣 的 事情 : 
元 素 的 “ 脸 ” 不 再 直接 旨 辣 你 。 它 的 “ 脸 ” 转 辐 别 的 地 方 ， 你 会 看 到 元 系 的 背面 。 图 15-18 中 的 
元 素 设 置 『 rotateY(180dqeg) 的 变换 ， 它 看 起 来 就 像 是 之 前 元 素 的 镜像 网 片 。 
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图 15-18 ”旋转 元 素 查 看 它 的 背面 
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这 就 是 元 系 的 背面 ,。 默认 情况 下 背面 是 可 见 的 , 但 我 们 可 以 为 元 又 设置 backface-visibility: 
hidden 来 改变 它 。 添 加 这 条 声明 之 后 ， 元 素 只 有 在 正面 朝向 观察 者 的 时 候 才 可 见 ， 朝 回 别 处 的 
时 候 不 可 见 。 

针对 这 项 技术 , 一 个 可 能 的 应 用 场景 是 把 两 个 元 素 背 徘 背 放 在 一 起 ,就 像 卡片 的 两 面 。 卡片 
的 正面 展示 出 来 ,背面 隐藏 。 然 后 我 们 可 以 旋转 它们 的 容 需 元 素 ,， 使 这 两 个 元 素 都 翻转 过 来 ,这 
样 正面 隐藏 背面 显现 。 卡 片 翻转 特效 的 演示 ， 参 见 文章 Intro to CSS 3D Transforms。 




















3.transform-style (preserve-3d) 属性 

如 于 你 要 使 用 舱 套 元 素 构建 复杂 的 3D 场景 ，transform-style 属性 就 变 得 非常 重要 。 现 
在 假设 我 们 已 经 对 容 需 设置 了 透视 距离 , 接 下 来 对 容 需 内 的 元 素 进 行 3D 变换 。 容 需 元 素 泻 染 时 ， 
实际 上 会 被 绘制 成 2D 场景 ,就 像 是 3D 对 象 的 一 张 照搬 。 这 看 起 来 没什么 问题 ， 因 为 元 素 最 终 
就 是 要 演 染 到 2D 屏 大 上 的 。 

如 果 接 下 来 我 们 对 容 澡 元素 进 行 3D 旋转 ， 就 有 问题 了 。 这 是 因为 实际 上 没有 对 整个 场 隶 进 
行 旋转 ， 只 是 旋转 3D 场景 的 2D 照片 。 透 视 距离 全 都 错 了 ， 场 景 中 的 立体 感 也 被 破坏 了 。 示 例 
如 图 15-19 所 示 。 
































3D 立 方 体 正面 视角 使 用 flat 变 换 样式 使 用 preserve-3d 变 换 
旋转 立方 体 样式 旋转 立方 体 





图 1$-19 ”如 果 对 3D 变换 元 系 的 父 元 素 再 做 3D 变换 ， 可 能 需要 用 到 preserve-3d 属性 ( 右 ) 


左 图 展示 了 通过 把 六 个 面 变换 到 相应 位 置 创建 一 个 3D 立方 体 。 中 间 的 图 片 展示 的 是 对 整个 
立方 体 ( 即 它们 的 父 元 素 ) 使 用 变换 会 发 生 什 么 。 为 了 改正 这 个 问题 ， 我 们 应 该 对 父 元 系 使 用 
transform-style: preserve-3d ( 如 右 图 所 示 ) 

















警告 所 有 下 浏览 器 中 都 不 支持 breserve-3d 变换 样式 。 


如 果 想 要 了 解 更 多 内 容 和 使 用 和 案例， 可 以 查看 Ana Tudor 在 DWB 网 站 写 的 教程 。 虽 然 这 些 
示例 很 有 意思 ， 但 我 从 来 没有 在 实际 项 目 中 使 用 过 breserve-3d。 如 果 你 接触 3D 变换 只 是 为 
了 看 看 可 以 实现 哪些 东西 ， 这 份 教程 会 很 有 帮助 。 
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15.5 总结 


口 在 二 维和 三 维 空间 中 使 用 变换 来 缩放 、 旋 转 、 平 移 和 倾斜 元 素 。 
口 如 果 想 要 优化 过 渡 和 动画 性 能 ， 变 换 就 必 不 可 少 。 

口 理解 泻 染 路 径 是 如 何 工 作 的 ， 创 建 动画 的 时 候 一 定 要 牢记 。 
口 使 用 自 定 义 定 时 函数 曲线 为 过 渡 添 加 弹跳 特效 。 








加 | 





本 草 概要 

D 使 用 关键 帧 动画 为 页 面 添加 复杂 运动 

口 页 面 加 载 的 时 候 使 用 动画 

口 使 用 旋转 大 动画 提供 反馈 

口 吸引 用 户 对 保存 按钮 的 注意 力 ， 提 醒 用 户 去 保存 














在 第 14 草 和 第 15 章 里 ， 我 们 创建 了 几 种 过 渡 行 为 ， 可 以 使 元 素 从 有 茶 种 状态 平滑 变换 为 必 
一 种 。 这 为 页 面 增添 了 动态 的 效果 , 用 户 体验 上 也 增加 了 视 党 趣味 性 ,但 有 时 候 仅仅 使 用 过 渡 还 
不 够 。 

过 渡 是 百 接 从 一 个 地 方 变 换 到 另 一 个 地 方 , 相 比 之 下 , 我 们 可 能 希望 菏 个 元 系 的 变化 过 程 是 
迁 回 的 路 径 。 有 时 , 我们 可 能 需要 元 素 在 动画 运动 后 再 回 到 起 始 的 地 方 。 这 些 事情 无 法 使 用 过 小 
来 实现 。 为 了 对 页 面 变化 有 更 加 精确 的 控制 ，CSS 提供 了 关键 帧 动画 。 

关键 帧 (keyframe ) 是 指 动画 过 程 中 茶 个 特定 时 刻 。 我 们 定义 一 些 天 键 帧 ， 浏 览 齿 负责 填充 
或 者 插入 这 些 关 键 帧 之 间 的 帧 图 像 ( 如 图 16-1 所 示 )。 


关键 由 关键 由 关键 帆 
插入 的 帧 图 像 插入 的 帧 图 像 


图 16-1 定义 关键 帧 后 ， 浏 览 带 插入 所 有 关键 帧 之 间 的 帧 网 像 




















从 原理 上 看 ,过 渡 其 实 和 关键 帧 动画 类 似 : 我 们 定义 第 一 帧 (起 始点 ) 和 最 后 一 帧 〈《 结束 点 )， 
浏览 硕 计 算 所 有 中 间 值 ， 使 得 元 素 可 以 在 这 些 值 之 间 平 请 变换 。 但 使 用 关键 帧 动画 ， 我 们 就 不 再 
局 限于 只 定义 两 个 点 ， 而 是 想 加 多 少 加 多 少 。 浏 览 角 负责 填充 一 个 个 点 与 点 之 间 的 值 ， 直 到 最 后 
一 个 关键 巾 ， 最 终生 成 一 系列 无 颖 衔接 的 过 渡 。 

最 后 这 一 草 将 介绍 如 何 创建 关键 帧 动画 。 我 们 会 在 前 一 草创 建 的 页 面 中 添加 一 些 动画 ,然后 
探索 它们 的 一 些 其 他 使 用 方式 。 动画 并 非 只 能 做 让 页 面 变 得 生动 的 事情 , 还 能 向 用 户 传 达 有 意义 
的 反馈 。 




















16.1 关键 帧 


CSS 中 的 动画 包括 两 部 分 ， 用 来 定义 动画 的 @&keyframes 规则 和 为 元 又 添加 动画 的 animation 
属性 。 

我 们 创建 一 个 简单 的 动画 来 熟悉 一 下 语法 。 动 画 包含 三 个 关键 帧 ， 如 图 16-2 所 示 。 第 一 帧 
中 元 系 是 红色 的 ; 第 二 帧 中 元 系 是 浅 赣 色 的 ， 并 且 辐 右 移 动 了 100px; 最 后 一 巾 中 ， 元 又 是 淡 紧 
色 的 ， 并且 回 到 了 左 侧 的 初始 位 置 。 





























图 16-2 三 个 关键 巾 ， 分别 对 元 素 的 颜色 和 位 置 添加 动画 


动画 对 packground-color 和 transform 这 两 个 属性 做 了 一 些 改动 。 关 键 帧 @ 规 则 如 代 
人 码 清单 16-1 所 示 ， 新 建 样式 表 styles.css 并 添加 这 些 代码 。 


代码 清单 16-1 定义 关键 帧 @ 规 则 


Qkeyframes over-and-back { < 一 为 动画 命名 
0% { 
background-color: hsl(0, S50%, 50%).; 
9 | 第 一 个 关键 由 声明 


transform: translate(0); 


} 


5O% { 
transform: translate (5Opx); 第 二 个 关键 帧 发 生 于 
} 动画 进行 到 一 半 时 
100% { 
background-color: hsl(270, 50%, 90%); 、 
transform: translate(0);} 最 后 一 个 关键 帧 
} 
} 


关键 帧 动画 都 需要 名 称 ， 示 例 中 的 动画 被 命名 为 over-and-back。 动 画 中 使 用 百分比 定义 了 
三 个 关键 帧 。 这些 百 分 比 代表 每 个 关键 帧 发 生 于 动画 过 程 中 的 哪些 时 刻 : 一 个 在 动画 的 开始 (0% )， 
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-个 在 中 间 (50% )， 一 个 在 终点 〈100% )。 每 个 关键 帧 块 内 的 声明 定义 了 当前 关键 帧 的 样式 。 
示例 中 同时 为 两 个 属性 添加 了 动画 ， 但 我 们 注意 到 并 不 是 每 个 关键 帧 都 设置 了 两 个 属性 。 
transform 把 元 素 从 初始 位 置 移动 到 右 侧 ， 然 后 再 移 回 原 位 ， 但 packground-color 在 50% 
的 关键 帧 中 并 没有 指定 。 这 意味 着 元 素 会 从 红色 〈0% 的 位 置 ) 过 渡 到 淡 紫 色 〈100% 的 位 置 ), 在 
5$0% 的 位 置 ， 背 景 颜 色 恰 好 是 这 两 个 颜色 的 中 间 值 。 
下 面 我 们 把 这 些 代 码 添 加 到 网 页 中 查看 效果 。 新 建 一 个 HTML 文档 并 添加 代码 清单 16-2。 


代码 清单 16-2 ”只 有 一 个 盒子 元 了 北 的 网 页 ， 为 盒子 请 加 动画 
<!ldoctype htmil> 
<html lang="en"> 














<head> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<div class="box"></div> 
</body> 
</htmil> 


接 下 来 在 样式 表 中 为 盒子 添加 样式 并 应 用 动画 ， 可 以 复制 代码 清单 16-3 中 的 代码 。 
代码 清单 16-3 为 盒子 应 用 动画 


即将 添加 动画 
的 元 素 











.box { 
width: 100px; 为 元 素 添 加 高 
height: 100px; 和 宽 以 便 演 示 


background-color: green.; 
animation: over-and-back 1.5s linear 3:; 


、 为 元 素 应 用 


动画 
在 浏览 锅 中 打开 网 页 ， 你 应 该 看 到 动画 重复 执行 了 三 次 ， 然 后 停 下 了 。animation 属性 是 
好 几 个 属性 的 简写 。 在 这 个 演示 中 ， 我 们 实际 上 指定 了 以 下 四 个 属性 。 
Danimation=-nadne (over-and-Baek) 一 一 代表 动画 名 称 ， 就 价 @keyframes 规则 定义 
的 那样 。 
口 animation-duration (1.5s) 一 一 代表 动画 持续 时 间 ， 丰 本 例 中 是 1.5s。 
UD animation-timing-function ( 1inear ) 代表 定时 也 数 ， 用 来 描述 动画 如 何 加 速 
和 /或 减速 。 可 以 是 贝 塞 尔 曲线 或 者 关键 字 值 ， 就 像 过 渡 使 用 的 定时 函数 一 样 ( ease-in、 
Sadse= 0 和 和 js 
Dnation Teerationeont (3) 代表 动画 重复 的 次 数 。 初 始 值 默认 是 1。 
刷新 页 面 ， 再 次 查看 动画 播放 ， 观 察 动 画 执行 过 程 中 的 几 个 地 方 。 
第 一 , 颜色 从 0% 的 红色 平滑 过 渡 到 100% 的 淡 烷 色 , 但 是 接 下 来 动画 重复 的 时 候 立 即 变 回 红 
色 。 如 有 果 你 打算 重复 某 个 动画 并 硕 望 整体 衔接 流畅 ， 需 要 确保 结束 值 和 初始 值 相 匹配 。 
第 二 ， 最 后 一 次 重复 动画 结束 后 ， 痛 景 颜色 变 为 绿色 ， 即 原样 式 规则 中 指定 的 值 。 但 注意 动 
画 持 续 过 程 中 , 这 人 句 样 式 声 明 被 ekeyframes 中 的 规则 狗 着 了 。 如 采 出 现 样 式 层 登 ,那么 动画 中 
设置 的 规则 比 其 他 声明 拥有 更 高 的 优先 级 。 
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我 们 回顾 一 下 第 1 草 (1.1.1 市 )， 层 羞 的 第 一 部 分 是 介绍 样式 表 的 来 源 。 作 者 样式 优先 级 高 
于 用 户 代理 样式 ,因为 作者 样式 有 比较 融 的 优先 级 来 源 , 但 动画 中 应 用 的 声明 有 更 融 的 优先 级 来 
源 。 为 某 个 属性 添加 动画 的 时 候 , 会 覆盖 样式 表 中 其 他 地 方 应 用 的 样式 。 这 就 确保 了 关键 帧 中 所 
有 的 声明 可 以 互相 配合 完成 动画 ， 而 不 用 关注 动画 之 外 对 这 个 元 又 可 能 应 用 了 哪些 样式 。 


警告 ”浏览 器 对 动画 的 支持 情况 比较 好 ， 仅 有 小 部 分 移动 浏览 器 需要 使 用 -webkit- 前 
级 ,动画 属性 ( -webkit-animation ) 和 关键 帧 @ 规 则 (@-webkit-keyframes ) 都 
要 用 到 。 这 就 需要 复制 出 有 前 级 和 无 前 级 两 套 人 代码。 可 以 考虑 使 用 Autoprefixer 来 实现 
(参见 第 5 章 附 加 栏 “ 浏 览 器 前 级 ”)。 





16.2 为 3D 变换 湛 加 动画 


接 下 来 ， 我 们 开始 在 第 15 半 创 建 的 网 页 上 添加 动画 。 完 成 代码 清单 15-10 后 ， 我 们 有 了 一 
个 蓝 色 背 景 的 页 面 ,页 面 左 侧 有 导航 沫 单 。 我 们 将 用 几 张 内 容 卡 片 来 填充 页 面 剩余 的 部 分 。 我 们 
先 完 成 整个 效果 图 的 页 面 布 局 ， 然 后 再 添加 动画 。 


16.2.1 创建 无 动画 页 面 布 局 


在 这 个 演示 中 ， 我 们 会 在 页 面 主 区 域 瀛 加 一 些 卡 片 ( 如 图 16-3 所 示 ) 然后 再 使 用 3D 变换 
添加 动画 ， 使 卡片 具有 飞人 效果 。 























The Yolk Factory 


Mrs. Featherstone 


She may be a bit frumpy, but Mrs 
Featherstone gets the job done. She 
lays her largish cream-colored eggs on 


a daily basis, She is gregarious to a fault. 


This Austra White is our most prolific 
producer. 


Hen Solo 


Though the most recent addition to our 
flock, Hen Solo is a fast favorite among 
our laying brood. She is a sassy and 
suspicious hen; we frequently have to 
follow her to find where she has hidden 
her loot from the other hens. 


This Snowy Easter Egger lays in 
delicate shades of blue and green. A 
full dozen of her eggs costs an 
additional $2. 


Cluck Norris 


Every brood has its brawler Cluck 
Norris is our feistiest hen, frequently 
picking fights with other hens about 
laying territory and foraging space. Her 
sister hens continue to hope that she 
will follow the steps of her namesake 
(eventually) and focus her strength 

of will for good, 


This Buff Chantecler is as robust and 
hardy as her Canadian forebears, laying 
through the coldest parts of the winter. 





图 16-3 ”页面 主 区 域 添 加 的 卡片 
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代码 清单 16-4 展示 了 这 部 分 内 容 的 代码 ， 把 这 些 代码 添加 到 页 面 上 <nav> 元 素 后 ( 为 了 节 
省 空间 ， 代 码 中 卡片 内 的 文字 有 删节 。 如 果 想 要 更 加 贴近 图 16-3 中 的 截图 ， 可 以 随意 添加 更 多 
内 容 )。 


代码 清单 16-4 创建 flyin-grig 和 几 张 卡片 
<main class="flyin-grid"> < 一 网 格 容器 
<div class="flyin-grid item card"> 





<img src="images/chickenl1.jpg" alt="a chicken"/> 
<h4>Mrs. Featherstone</h4> 
<p> 
She may be a bit frumpy, but Mrs Featherstone gets 
the job done. She lays her largish cream-colored 
eggs on a daily basis. She is gregarious to a fault . 
</D> 
</div> 
<div class="flyin-grid item card"> 
<img src="images/chicken2.jpg" alt="a chicken"/> 
<h4>Hen Solo</h4> 


<D> 

Though the most recent addition to our flock, Hen 卡片 同时 也 

Solo is a fast favorite among our laying brood. 是 网 格 元 素 
</D> 
</div> 


<div class="flyin-grid item card"> 
<img src="images/chicken3.jpg" alt="a chicken"/> 
<h4>Cluck Norris</h4> 
<p> 
Every brood has its brawler. Cluck Norris 1S Our 
feistiest hen, frequently picking fights with other 
hens about laying territory and foraging space. 
/DS 
</div> 
<div class="flyin-grid item card"> 
<img src="images/chicken4.jpg" alt="a chicken"/> 
<h4>Peggy Schuyler</h4> 
<p> 
Peggy was our first andq friendliest hen. She is the 
most likely to greet visitors to the yard, and 
frequently to be found nesting in the coop. 
</D> 
</div> 
</main> 


这 部 分 页 面 由 两 个 模块 组 成 。 外 层 的 模块 是 飞人 网 格 (Flyin-Grid )， 为 网 格 内 的 元 素 提供 了 
布局 , 同时 还 包含 了 3D 飞 入 效果 , 接 下 来 会 讲 到 。 每 个 网 格 元 系 都 是 内 层 卡 片 模块 的 一 个 示例 。 
卡片 模块 提供 了 外 观 样式 ， 包 括 和 白色 背景 、 内 边 距 和 字体 颜色 等 。 

这 种 布局 首选 网 格 布 局 ， 接 下 来 就 会 用 到 。 同 时 我 们 也 应 该 考虑 到 移动 端 布 局 ， 以 及 在 不 支 
持 网 格 的 旧版 浏览 需 中 基于 Flexbox 的 回 退 方 案 。 我 们 首先 实现 移动 端 布局 ， 然 后 添加 Flexbox 
样式 ， 最 后 是 基于 网 格 的 样式 。 
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移动 器 布局 效果 如 图 16-4 所 示 。 在 小 屏 医 上， 卡片 会 十 满 屏 峰 的 宽度 ， 只 留 


外 边 距 。 


The Yolk Factory 


{0 HOME EVENTS 2 MEMBERS Yr ABOUT 





Mrs. Featherstone 


She may be a bit frumpy, but Mrs Featherstone gets the 
job done. She lays her largish cream-colored eggs on a 


图 16-4 移动 端 布 局 中 ， 卡 片 会 填 满 屏 右 党 度 ， 谷 放 在 末 单 下 方 
将 代码 清单 16-5 中 的 移动 样式 添加 到 样式 表 中 。 


代码 清单 16-5 ”卡片 的 移动 样式 


a 在 容器 左右 两 侧 添 加 
margin: 0 lrem; 很 小 的 外 边 距 





.Card { 
margin-bottom: lem; 
padding: 0.5em; 


background-color: white; 为 卡片 添加 颜色 
color: hsl(210, 15%, 20%); 和 其 他 细节 样式 


box-shadow: 0.2em 0.5em lem rgba(0, 0, 0, 0.3); 
} 
.Card > img f{ 
width: 100%; 
} 


设置 图 片 应 该 填 满 
整 张 卡片 的 宽度 








左右 两 侧 一 点 


在 这 样 的 屏 融 尺寸 下 ， 必 入 网 格 很 容易 实现 ,因为 网 格 元 系 只 需要 像 普 通 块 级 元 条 一样 正 确 
三 放 。 每 张 卡片 那 设置 了 蝗 色 背景 和 简单 的 外 观 样式 。 很 快 我 们 就 会 使 用 媒体 查询 设置 更 加 复 杀 


的 布局 。 


接 下 来 ,我 们 使 用 Flexbox 添加 回 退 布局 ， 这 只 会 应 用 在 较 大 的 屏 厅 上。 这 样 就 比较 接近 最 


终 的 效果 图 (如 图 16-3 所 示 ) 了 。 将 代码 清单 16-6 中 的 CSS 添加 到 样式 表 。 
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代码 清单 16-6 ”使 用 基于 Flexbox 的 回 退 布局 


.flyin-griqd { 


margin: 0 lrem; 

} 
响应 式 布 
可 的 册 占 
@media (min-width: 30em) { 局 的 断 点 
.flyin-grid { 本 并 
display: flex; 建立 允许 折 行 

flex-wrap: wrap; 的 弹性 容器 


| margin: 0 5S5rem; 增加 两 侧 
的 内 边 距 


.flyin-grid item { 
flex: 1 1 300px; 
margin-left: 0.5em; 允许 flex-grow， 设 置 
margin-right: 0.5em; flex-basis 为 300px 
max-width: 600px; 


l 


代码 清单 16-6 使 用 Flexbox 创建 了 一 个 啊 应 式 布局 。 我 们 设置 了 了 flex-wrap: wrap， 这 样 
弹性 元 素 在 同一 行 放 不 下 的 时 候 允 许 换 行 。 弹 性 基准 值 300px 指定 了 元 系 的 最 小 宽度 ， 同 时 
max-width 指定 了 最 大 宽度 ， 在 这 些 约束 条 件 下 ， 需 要 的 时 候 元 系 就 会 换行 。flex-grow 的 值 
为 1， 人 允许 卡片 拉 伸 填 满 容 顺 的 剩余 空间 。 

卡片 模块 不 需要 在 之 前 添加 的 移动 端 样式 基础 上 做 任何 改变 
前 三 : 任 。 

在 某 些 特定 的 屏幕 尺寸 下 ， 人 致 , 但 如 果 最 后 一 行 的 卡片 数量 少 于 
面 每 行 的 卡片 数量 ， 卡 片 宽度 不 会 总 是 相同 。 这 个 问题 如 图 16-5 所 示 。 











, 所 有 的 颜色 和 其 他 样式 都 和 之 





Mrs. Featherstone 


She may be a bit frumpy, but Mrs 
Featherstone gets the job done. She lays 
her largish cream-colored eggs on a daily 
basis. She is gregarious to a fautt， 


This Austra White is our most prolific 
producer. 


图 16-5”Flexbox 使 得 最 后 


Hen Solo 


Though the most recent addition to our 
flock, Hen Solo is a fast favorite among 
our laying brood. She is a sassy and 
suspicious hen; we frequently have to 
follow her to find where she has hidden 
her loot from the other hens,. 


This Snowy Easter Egger lays in delicate 
shades of blue and green. A full dozen of 
her eggs costs an additional $2. 


Cluck Norris 


Every brood has its brawler. Cluck Norris is 
our feistiest hen, frequently picking fights 
with other hens about laying territory and 
foraging space. Her sister hens continue to 
hope that she will follow the steps of her 
namesake (eventually) and focus the her 
strength of will for good. 


This Buff Chantecler is as robust and hardy 
as her Canadian forebears, laying through 
the coldest parts of the winter. 





一 行 中 的 卡 户 不 会 总 和 上 面 每 行 的 卡片 宽度 一 臻 
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在 这 样 的 视 口 宽度 下 ( 大约 1000px ), 第 一 行 刚好 放 和 三 张 卡 片 , 第 二 行 上 只 剩 下 了 一 张 卡 片 。 
最 后 的 这 张 卡片 宽度 拉 伸 到 max-widtnh 的 600px， 这 使 得 它 明 显 比 其 他 卡片 大 。 缩 小 屏幕 矿 二 
允许 放下 两 行 ， 每 行 只 有 两 张 卡片 ， 那 所 有 卡片 的 太 才 就 会 相同 ， 因 为 每 行 的 卡片 数量 一 样 多 。 
一 旦 改变 屏 禹 尺寸 ,可 能 又 会 出 现 这 种 问题 。 除 了 屏 莫 尺寸, 还 跟 一 共有 多 少 张 卡片 有 关系 ， 比 
如 六 张 卡 片 可 能 会 整齐 地 分 成 两 行 ， 每 行 三 张 , 但 在 更 大 的 屏 估 尺寸 下 可 能 出 现 一 行 四 张 、 力 一 
行 两 张 的 情 沈 。 

我 们 还 是 可 以 使 用 弹性 布局 的 , 虽然 这 不 是 最 理想 的 解决 方案 , 但 简单 易 用 。 对 前 面 描述 的 
这 种 问题 ,我 们 有 两 种 选择 : 一 是 花 时 间 计 算 多 个 断 扣 ,然后 针对 不 同 弹性 元 系 的 客 度 做 特定 设 
置 ; 二 是 把 这 种 问题 看 作 是 一 种 “效果 还 凑合 ”的 回 退 方案 , 在 文 持 网 格 的 浏览 硕 中 使 用 网 格 布 
局 来 黎 兰 弹性 布局 。 

下 面 我 们 来 实现 第 二 个 选择 。 在 弹性 布局 的 后 面 ， 我 们 使 用 特性 查询 来 检测 是 否 支 持 grid 
并 添加 履 畜 样式 。 更 新 代码 清单 16-7 中 的 CSS 代码 到 样式 表 中 。 


代码 清单 16-7 ”对 文 持 网 格 布局 的 浏览 硕 添 加 网 格 布局 
@Qmedia (min-width: 30em) { 
.flyin-gridqd { 






































display: flex; 回 退 样式 
flex-wrap: wrap; 不 做 更 改 


margin: 0 5S5rem; 


} 


.flyin-grid item { 
flex: 1 1 300px; 
margin-left: 0.5em; 
margin-right: 0.5em; 
max-width: 600px; 


} 0 
网 格 布局 的 支持 情况 
Gsupports (display: grid) { 
fl1yin=grid 定义 列 宽 
display: grid; 
grid-template-columns: repeat (auto-fit, minmax(300px, lfr)).; 
grid-gap: 2em; 





} 


.flyin-grid item { 
max-width: jnitial; 


人 移 除 回 退 布局 中 
} 设置 的 外 边 距 
| 
现在 最 新 的 浏览 妖 中 会 使 用 完美 的 布局 方式 。 网 格 列 会 确保 所 有 的 网 格 元 率 宽 度 一 人 致 。 使 用 
匡 必 各 忆 人 世人 《外 上 入世 G 于 和 攻 允许 网 格 来 确定 当前 的 视 口 宽度 下 多 少 列 最 合适 。 这 种 解决 方案 在 旧版 
浏览 需 中 可 以 优雅 地 降级 为 弹性 布局 ， 在 小 视 口中 会 显示 更 简单 的 移动 端 布 局 。 
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16.2.2 ”为 布局 添加 动画 


页 面 的 设计 和 布局 工作 已 经 完成 ， 接 下 来 该 添加 动画 了 。 页 面 加 载 的 时 候 ， 卡片 是 飞 入 的 ， 
如 图 16-6 所 示 。 卡 片 会 以 绕 纵 轴 旋 转 90 度 的 起 始 状态 ， 从 远 处 出 现 。 然 后 它们 会 飞 回 观察 者 ， 
在 动画 接近 结束 的 时 候 ， 转 到 百 接 朝 四 观 察 者 。 图 16-6 展示 了 定义 动画 的 三 个 关键 帧 。 

















Hen Solo Cluck Norris 


Mrs. Featherstone Though the most recent addition to our fock. Hen Every brood has its brawler. Cluck Norris is our 


Solo is a fast favorite among our laying brood., She is feistiest hen, frequently picking fights with other 


She may be a bit frumpy, but Mrs Featherstone gets a sassy and suspicious hen; we frequently have to hens about laying territory and foraging space. Her 
thejob done, She lays her largish cream-colored follow her to find where she has hidden her loot sister hens continue to hope that she will follow the 
eggs on a daily basis. She is gregarious to a fault from the other hens steps of her namesake (eventualty) and focus the 


her strength of will for good 
his Austra White is our most prolific producer This SNOw y Easter Egger lays in delicate shades of 


blue and green. A full dozen of her eggs costs an 


This Buff Chantecler is as robust and hardy as her 
additional $2 


Canadian forebears. laying through the coldest parts 


of the winter 





图 16-6 使 用 3D 变换 实现 从 远 处 飞 入 卡片 
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这 有 段 动画 包含 两 个 变换 translatez () 使 卡片 从 远 处 飞 回来 ，rotateY () 负责 旋转 卡片 。 
代码 清单 16-8 列 出 了 相关 代码 ， 包 括 对 flyin-grid 容器 设置 了 透视 距离 ， 定 义 了 关键 帧 ， 并 为 
个 flyin-grid 元 系 添 加 了 动画 。 我 们 也 添加 了 不 透明 的 设置 ， 这 样 元 系 飞 和 人 时 会 附 审 过渡 特效 。 


代码 清单 16-8 添加 飞人 动画 
.flyin-gridqd { 


margin: 0 lrem; 在 容器 上 设置 共 
[a ~N\ 


perspective: 500px; a 
) 享 的 透视 距离 


.flyin-grid item { 


1mati : fly-] 600 -1in; x 至 
animat1ion y-1n ms ease-1in 为 每 个 元 素 
添加 动画 
Qkeyframes fly-in { 
0 { 
transform: transljateZ(-800px) rotateY (90deg); 以 旋转 后 的 状态 
opacity: 0; 从 远 处 开始 
} 
56% { 
Cranisformm: trianslares(t= L005 TootevY (sdedys 已 经 很 近 了 , 但 几 
en 乎 还 是 旋转 状态 
100% { 


transform: translateZ(0) rotateY(0).， 
} 在 正常 位 置 结束 
} 


这 段 CSS 在 容 般 上 设置 了 透视 距离 ， 这 样 所 有 的 元 系 会 处 于 相同 的 透视 角度 下 。 同 时 还 为 
每 个 元 素 设 置 了 动画 。 加 载 页 面 查 看 动画 效 朱 。 

动画 以 旋转 后 的 元 素 从 远 处 飞 回 开始 。 在 起 始 关 键 帧 和 中 间 关 键 帆 之 间 , 元 系 沿 Z 轴 一 路 回 
前 快速 推进 《从 800px 到 160px )， 从 透明 逐渐 过 渡 到 完全 不 透明 。 从 中 间 关 键 帧 到 结束 关键 帧 ， 
最 后 一 小 段 推进 结束 ， 而 大 部 分 的 旋转 发 生 在 这 期 间 。 


16.3 动画 延迟 和 填充 模 却 


可 以 使 用 animation-delay 属性 推迟 动画 开始 的 时 间 ,该 属性 行为 和 transition-delay 
类 似 。 利 用 这 个 属性 ， 我 们 可 以 设置 动画 交错 发 生 ， 这 和 第 15 革 中 导航 六 单 交错 产生 过 渡 效 有 果 
的 方式 差不多 。 通 过 在 稍微 不 同 的 时 间 内 错开 每 个 元 素 的 动画 ， 可 以 使 它们 一 个 接 一 个 地 发 入 ， 
如 图 16-7 所 示 。 
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Mrs. Featherstone 


She ma m 
ybe abitf 
] ruUmPy. but Mr 
本 Ss Feath 
he i do la gish croreol On 
Sggs ona da yY basis. She is gregarious to af tt 
ault. 


Thi es 
Is Austra White IS Our Most prolific Producer 





图 16-7 元 素 使 用 交错 的 动画 效果 飞 入 


代码 清单 16-9 是 为 四 个 网 格 元 素 诡 加 延迟 的 ， 但 这 段 代码 并 没有 完全 按照 我 们 预期 的 那样 
运行 。 乞 把 这 段 代 码 添加 到 样式 表 中 ， 然 后 我 们 人 研究 一 下 问题 所 在 以 及 如 何 解决 它 。 


代码 清单 16-9 ”错开 动画 开始 时 间 

.flyin-grid item { 
animation: fly-in 600ms ease-in; 

} 

.flyin-grid item:nth-child(2) { 
animation-delay: 0.15s; 

上 

.flyin-grid item:nth-child(3) { 
animation-delay: 0.3s; 

} 

.flyin-grid item:nth-child(4) { 
animation-delay: 0.45s; 


) 


在 浏览 器 中 加 载 页 面 , 你 可 能 已 经 发 现 了 问题 。 动画 确 实 是 在 预期 的 时 间 播 放 的 , 但 有 些 元 
素 提 前 展示 在 了 页 面 上 , 一 小 段 时 间 后 它们 消失 然后 播放 动画 ( 如 图 16-8 所 示 ) 这 有 点 不 合理 ， 
不 是 我 们 想 要 的 效果 。 我 们 硕 望 所 有 的 元 素 在 开始 的 时 候 都 不 可 见 ， 只 有 在 各 目的 动画 执行 的 时 
候 才 会 出 现 。 


把 每 个 元 素 的 动画 开始 时 间 
设置 得 比 前 一 个 稍 晚 一 点 











Cluck Norris 


Every brood has its brawler. Cluck Norris is our 
feistiest hen, frequently picking fights with other 
hens about laying territory and foraging space. Her 
sister hens continue to hope that she will follow the 
steps of her namesake (eventually) and focus the 
her strength of will for good 


This Buff Chantecler is as robust and hardy as her 
Canadian forebears, laying through the coldest parts 
of the winter. 





图 16-8 后 面 的 元 素 在 动画 还 没 开 始 播放 的 时 候 就 出 现在 了 最 终 位 置 


这 个 问题 的 出 现 是 因为 transform 和 SpacLty 属性 只 应 用 在 了 动画 执行 期 间 。 动画 开始 
之 前 ， 网 格 元 际 在 页 面 上 是 可 见 的 ， 束 在 它们 各 目的 正 背 位 置 。 动 画 开始 的 时 候 ， 它 们 瞬间 变 成 
0% 关 键 帆 上 应 用 的 属性 值 。 我 们 和 要 把 动画 样式 后 癌 填 充 设 置 ， 就 像 一 二 暂停 在 第 一 帜 ， 耳 到 
动画 开始 播放 。 可 以 使 用 animation-fill-mode 属性 来 实现 (如 图 16-9 所 示 )。 

















0 
如 
8 
中 | 
上 
有 
od 
Ly 
时 间 
图 16-9 使 用 animation-fill-mode 可 以 在 动画 播放 前 或 播放 后 应 用 动画 样式 


这 里 的 次 色 盒 子 代 表 动 画 的 持续 时 间 。animation-fil11l1-mode 的 初始 值 是 none， 意 思 是 
动画 执行 前 或 执行 后 动画 样式 都 不 会 应 用 到 元 系 上 。 如 果 设 置 animation-fill-mode: 
backwards， 在 动画 执行 之 前 ,浏览 融 就 会 取出 动画 中 第 一 帧 的 值 ， 并 把 它们 应 用 在 元 系 上 ; 使 
用 forwards 会 在 动画 播放 完成 后 仍然 应 用 最 后 一 帧 的 值 ;使 用 both 会 同时 间 前 和 癌 后 填充 。 

为 页 面 添 加 后 癌 填 充 模式 可 以 修复 动画 开始 时 的 元 系 跳动 。 将 代码 清单 16-10 更 新 到 样式 
表 中 。 
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代码 清单 16-10 ”使 用 后 向 动画 填充 模式 


.flyin-grid item { 0 
animation: fly-in 600ms ease-in; 动画 开始 之 前 应 用 第 一 帧 


animation-fill-mode: backwards; 上 的 动画 样式 
} 


这 样 就 可 以 使 动画 的 初始 状态 暂停 在 第 一 帧 ， 等 待 动画 的 播放 。 现 在 ,在 动画 开始 之 前 ， 网 
格 元 素 向 后 移动 了 800px， 旋 转 了 90 度 ，opacity 设 为 0， 准备 好 了 迎接 动画 开始 。 

因为 动画 结束 时 元 素 就 停 在 它们 本 来 的 位 置 , 所 以 我 们 不 需要 设置 前 向 填充 , 卡片 已 经 完美 
地 从 动画 的 最 后 一 帧 变 到 了 元 系 的 静止 位 置 。 


16.4 通过 动画 传递 意图 


人 们 对 动画 有 个 普遍 误解 ， 即 它们 只 是 用 来 让 页 面 变 得 有 趣 , 没有 什么 实际 用 处 。 有 时 候 确 
实 是 这 样 的 ( 就 像 上 一 个 例子 )， 但 不 总 是 这 样 。 有 些 非 党 好 的 动画 不 是 最 后 才 加 上 的 ， 而 是 融 
入 到 了 开发 过 程 中 。 它 们 向 用 户 传 达 页 面 上 茶 些 事物 的 特殊 合 义 。 


16.4.1 反馈 用 户 操作 


动画 可 以 四 用 户 表明 按钮 被 点 击 了 或 者 消息 被 接收 了。 如果 你 曾经 提交 过 表单 , 回想 一 下 是 
人 否 经 常 记 不 清 目 己 点 没 点 过 注册 按钮 ， 承 知道 这 有 多 重要 了 。 

在 新 页 面 上 创建 一 个 包含 提交 按钮 的 小 表单 。 然 后 我 们 会 再 添加 一 个 旋转 指示 融 , 让 用 户 知 
过 表单 正在 发 送 ， 浏 览 毅 正在 等 待 服务 名 的 啊 应 。 表 单 如 图 16-10 所 示 ， 由 一 个 标签 、 一 个 文本 
域 和 一 个 按钮 组 成 。 


Tell us about your first trip to the zoo: 












































Save 


图 16-10 一 个 带 Save 按钮 的 简单 的 表单 
新 建 一 个 页 面 和 空白 样式 表 ， 用 来 添加 表单 。 把 代码 清单 16-11 中 的 HTML 加 进去 。 
代码 清单 16-11 带 Save 按钮 的 表单 


<!ldoctype htmil> 
<html lang="en"> 
<head> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 














大 大 一 一 
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文本 域 
<form> 
<label for="trip">Tell us about your first trip to the zoo:</label> 
<textarea id="trip" name="about-my-trip" rows="5"></textarea> 
<button type="submit" id="submit-button">Save</button> 
form Ee 
SO 提交 按钮 
</body> 
</html> 


我 们 先 添 加 一 些 CSS, 让 页 面 有 合 


适 的 布局 和 样式 , 之 后 青 加 入 一 些 有 意义 的 动画 效果 来 增 





强 用 户 体 验 。 把 代码 清单 16-12 加 入 到 样式 表 。 


代码 清单 16-12 


body { 


font-family: Helvetica, 


一 


form { 
max-width: 


} 


5OO0pPx; 


lJ]abel, 
textarea { 
display: block; 


margin-bottom: lem; 
} 
textarea { 
width: 100%; 
font-size: inherit; 


l 


button { 
padding: 0.6em lem; 
border: 0; 
background-color: 
Color: white; 

font: 

transition: 


) 


button:hover { 


nnerits 


background-color: 


} 


我 们 假设 这 个 表单 是 茶 个 大 型 Web 应 用 程序 中 的 一 
发 送 数据 到 服务 如 ,或许 还 会 在 接收 到 啊 应 后 浴 加 一 些 


hsl (220, 


background-— 


hsl (220, 


调整 表单 布局 并 添加 样式 


Arial, sans-serif.; 


限制 表单 
最 大 宽度 


市 白色 文字 的 
蓝 色 按钮 


a 


Ul 
CE 
OO 


Color 0.3s 11near， 


鼠标 悬 停 时 加 


45%, 40g) ， 深 按钮 颜色 





。 用 户 点 击 Save 按钮 的 时 候 ， 它 会 
新 容 到 页 面 上 ,但 是 网 络 连 接 需 要 时 间 。 








如 果 用 户 在 等 每 啊 应 的 时 候 , 可 以 有 一 些 形象 的 指示 告诉 他 们 内 容 已 经 提交 了 ,很 快 就 会 有 反馈 ， 


那么 他 们 心里 就 会 比较 踏实 。 
我 们 可 以 修改 Save 按钮 ， 


通常 情况 下 我 们 会 使 用 动画 来 提供 这 
增加 一 种 “正在 加 载 ”的 状态 。 





种 指示 。 
这 时 候 按钮 文字 隐藏 起 来 ， 用 一 








个 旋转 图 标 代 蕉 ( 如 图 16-11 所 示 )。 用户 提交 表单 时 , 我 们 使 用 JavaScript 为 按钮 添加 is-loading 


类 ， 动 夯 效 采 就 出 来 了 。 
Tell us about your first trip to the zoo: 


| took my first trip to the zoo when | was five years old. My favorite 
animals were the pigeons at the food court. 


图 16-11 用 户 点 击 Save 时 ， 旋 转 图 标 出 现在 按钮 上 








和 意图 361 


我 们 可 以 用 多 种 不 同 的 方式 设计 旋转 图 标 。 这 里 使 用 了 我 个 人 比较 偏爱 的 一 种 设计 , 一 个 旋 
转 的 月 牙 形 ， 看 上 去 非常 小 但 效 末 不 错 。 添 加 旋转 图 标 需要 对 CSS 做 两 处 改动 ， 首 先 使 用 边框 





和 边框 圆 角 制作 月 牙 形 状 ， 然后 设置 动画 使 其 旋转 起 来 。 要 使 用 这 些 样式 ， 


JavaScript 语句 ， 在 按钮 被 点 击 时 添加 ijs-loading 类 。 


还 需要 少量 的 


相关 的 CSS 如 代码 清单 16-13 所 示 。 这 段 代 码 会 在 按钮 上 的 一 个 绝对 定位 的 伪 元 系 上 添加 动 


画 。 把 它 染 加 到 样式 表 。 


代码 清单 16-13 ”定义 旋转 动画 和 is-loading 状态 
button.is-loading f{ 
position: relative; | 隐藏 按钮 文字 
Color: transparent,; 
} 
button.is-loading: :after f{ 
position: absolute; 
CONCemce 
display: block; 
width: 1.4em; 
height: 1.4em; 


top: S50%; 

left: 50%; 把 伪 元 素 定 位 
margin=left: =0.,7em; 到 按钮 中 心 
margin-top: -0.7em; 


border-top: 2px solid white; 
border-radius: 50%; 


animation: spin 0.5s linear infinite; 

} 重复 循环 
旋转 动画 

Qkeyframes spin f{ 

0 { 

transform: rotate(0deg),;} 

} 

100% { 

| transform: rotate(360deg); 设置 每 次 循环 

都 旋转 一 周 


} 


这 样 就 为 按钮 定义 了 is-loadqing 状态 。 一旦 应 用 ， 按 钮 的 文字 被 color: 
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设置 成 不 可 见 ， 旦 伪 元 系 通 过 绝对 定位 放 在 了 按钮 的 中 间 。 

这 里 的 定位 稍微 有 点 麻烦 。top 和 Left 属性 分 别 把 伪 元 素 回 下 移动 了 按钮 高 度 的 一 半 、 回 
右 移 动 了 按钮 宽度 的 一 半 ,， 这样 伪 元 素 的 左上 角 恰 好 位 于 按钮 的 中 心 点 。 然 后 ， 负 外 边 距 又 把 伪 
元 素 分 别 癌 上 和 加 左 拉 回 了 0.7em， 而 0.7em 正好 是 按钮 宽度 和 高 度 的 一 半 。 这 四 个 属性 作用 在 
一 起 ， 使 伪 元 系 在 按钮 的 水 平和 坚 直 方向 上 都 居中 。 可 以 为 元 素 临 时 加 上 is-loaqing 类 ， 在 
浏览 句 的 开发 者 工具 中 分 别 调整 这 些 值 ， 体 会 一 下 它们 是 如 何 使 伪 元 素 居中 的 。 

明日 伪 元 素 定 位 后 , 我 们 再 来 看 动画 。 这 里 使 用 了 一 个 新 的 关键 字 infinite 赋值 给 动画 重 
复 次 数 ， 意 思 是 只 要 is-loading 类 应 用 在 按钮 上 ， 动 画 就 一 直 重 复 。 动 画 使 用 了 旋转 变换 ， 
从 0 度 到 360 度 ,这 样 就 可 以 把 伪 元 素 旋 转 一 整 圈 。 动 画 的 结尾 恰好 使 元 素 停留 在 开始 的 位 置 ， 
看 上 去 动画 每 次 重复 部 无 颖 衔接 。 

把 代码 清单 16-14 中 script 标签 添加 到 网 页 。 这 样 通过 使 用 JavaScript 的 能 力 ， 当 按钮 被 
点 击 的 时 候 ， 就 会 添加 is-loading 类 。 把 这 段 代码 放 到 </body> 闭 合 标 签 前 面 。 


代码 清单 16-14 ”按钮 被 点 击 的 时 候 添 加 ijs-loading 类 


<script type="text/javascript"> 















































var input = document .getElementBylId('trip'); 
Var button = document .getElementById('submit-button'); 
button.addEventListener('click', function(event) { 
event .preventDefault () ; 
BUtton.olasetiet dd eo=16ading .3 | 阻止 表单 提交 
button.disabled = true; 
oUt .disabled = teues 显示 加 载 旋 
转 图 标 
ee | 这 里 的 代码 会 使 用 JavaScript 
Rs 提交 表单 数据 


点 击 Save 按钮 的 时 候 ，prevent-Default () 阻 止 了 正 稼 的 表单 提交 。 这 样 在 系统 上 使 用 
JavaScript 提交 表单 数据 的 时 候 ， 可 以 让 用 户 集 留 在 当前 页 面 ， 不 会 跳 转 离开 。 在 此 期 间 ， 输 入 
功能 是 禁止 的 , is-loading 类 添加 到 了 按钮 上 , 旋转 指示 可 会 显示 出 来 。 加 载 页 面 并 点 击 按钮 ， 
查看 旋转 指示 带 的 展示 效果 。 

这 里 我 们 没有 真 的 提交 表单 数据 ， 因 为 在 这 个 演示 中 没有 可 提交 数据 的 服务 奋 。 但 在 真正 开 
发 应 用 程序 的 时 候 ， 一旦 服务 各 啊 应 ,需要 恢复 表 蛙 输入 并 移 除 is-1oading 类 。 我 们 这 里 只 
是 为 了 党 示 ， 刷 新 页 面 就 可 以 重 置 表单 和 移 除 is-loading 类 。 


16.4.2 ”了 吸引 用 户 的 注意 力 


动画 也 可 以 用 来 把 用 户 的 注意 力 吸引 到 某 些 地 方 。 如 果 预 测 到 用 户 可 能 会 在 文本 域 中 输入 较 
多 的 内 容 , 我 们 可 以 提醒 用 户 在 输入 的 时 候 及 时 保存 。 使 用 动画 快速 反动 按钮 ， 就 可 以 提示 用 户 
保存 他 们 输入 的 内 容 ( 如 图 16-12 所 : )。 
























































save 
sa 





Save 
sae 


图 16-12 ”快速 左右 移动 按钮 ， 产 生 摇 哆 效 末 


多 次 快速 左右 变换 元 素 ,就 可 以 产生 揪 晃 效果 ,我 们 可 以 定义 一 个 关键 帧 动画 ,并 使 用 shake 
类 把 动画 应 用 到 按钮 元 系 上 。 将 代码 清单 16-15 浴 加 到 样式 表 。 


代码 清单 16-15 “定义 摇晃 动 画 
.Shake { 
animation: shake 0.7s linear; 


} 


Qkeyframes shake { 


} 


0 名 ， 


100% { 


transform: 


】 
10%g, 
30%®， 
D0%, 
70% { 


transform: 


} 
20%, 
40%, 
60% { 


transform: 


】 
80% { 


transform: 


} 
90% { 


transform: 


】 


动画 执行 期 间 ， 在 多 个 位 置 
使 用 相同 的 关键 帧 定义 
translateX(0).; 


器 左 移动 元 素 
translateX(-0.4em); 


向 右 移动 元 素 
translateX(0.4em).; 
七 1 XxX 0 .3 7 三 | 、 S72 二 
ranslatex 人!( em) 最 后 一 次 摇晃 的 时 候 
降低 移动 幅度 


translateX(-0.3em); 


我 们 在 这 个 动画 中 增加 了 一 些 新 的 东西 ， 即 多 次 应 用 相同 的 关键 帧 定义 。 
在 开始 ( 0% ) 和 结束 ( 100% ) 关键 帧 ， 元 素 位 于 默认 位 置 。 因 为 这 两 个 关键 帧 使 用 的 值 相 
同 ， 所 以 我 们 可 以 只 定义 一 次 属性 值 ， 使 用 逗号 分 隔 。10%、30%、50% 和 70% 人 处 的 关键 帧 也 一 





样 ， 都 是 把 元 素 向 左 移动 ， 而 20%、40% 和 60% 处 的 关键 帧 是 把 元 素 向 右 移动 。80% 和 90% 两 个 
关键 帆 分 别 癌 右 侧 和 左 侧 移动 元 素 ， 但 是 幅度 稍 小 。 
动画 一 共 四 次 择 动 了 元 素 , 其 中 第 四 次 幅度 有 所 降低 , 用 来 模拟 运动 即将 结束 慢 下 来 的 过 程 。 
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你 也 可 以 暂时 把 shake 类 添加 到 按钮 上 ， 页 面 加 载 的 时 候 和 耻 接 查看 动画 效果 。 


说 明 样式 表 中 的 动画 可 以 多 次 重复 调用 ， 因 此 动画 的 定义 不 需要 和 最 终 使 用 动画 的 模 
块 放 在 一 起 ,我 喜欢 把 所 有 @keyframe 定义 都 聚集 在 一 起 , 放 在 样式 表 接 近 末 尾 的 地 方 。 


最 后 , 在 我 们 认为 用 户 可 能 需要 保存 输入 的 时 候 , 使 用 JavaScript 播放 动画 。 可 以 使 用 keyup 
事件 监听 融和 超时 国 数 来 实现 。 当 用 户 回 文本 域 输入 字符 的 时 候 , 我 们 可 以 设置 一 个 一 秒 的 超时 
国 数 ， 问 按钮 添加 snake 类 。 如 果 用 户 在 一 秒 结束 之 前 输入 了 其 他 字符 ， 我 们 就 清除 计时 ， 重 
新 设置 一 个 。 按 照 代 码 清单 16-16 更 新 页 面 里 的 script 标签 。 


代码 清单 16-16 “一 秒 延 迟 后 添加 shake 类 


<script type="text/javascript"> 























var input = document .getElementBylId('trip'); 
Var button = document .getElementBylId('submit-button'); 
<V_ 企 亦 旦 
var timeout = null; > | 这 里， 
指向 超时 函数 
button.addEventListener('click', function(event) { 


event .preventDefault(); 
clearTimeout (timeout).;} 
button.classList.add('is-loading');} 
button.disabled = true; 
input.disabled = true; 








取消 等 待 的 超时 函数 























和 (如果 有 的 话 ) 
input .addEventListener('keyup', function() { 

clearTimeout (timeout): 

CIMeout Ss BetlImMeout ED 返 2 

Nttorn elasenist Sqdt ehaker ys 1s 等 待 后 ， 湛 加 

下 1000) ， shake 类 
站 
button.addEventListener('animationend', function() { _ 

办 | 男 | 结 

button.classList.remove('shake').; 动画 结束 后 移 除 

人 shake 类 





</script> 


现在 加 载 页 面 并 在 文本 域 中 输入 一 些 文字 。 等 待 一 秒 后 ,保存 按钮 会 出 现 摇晃 。 只 要 我 们 村 
续 输 入 ， 计 时 需 会 不 断 地 重 置 ， 摇 晃动 画 不 会 出 现 ， 直到 下 一 次 停止 输入 超过 一 秒 后 。 这 样 摇晃 
的 按钮 不 会 总 是 打上 断 用 户 ， 只 在 用 户 俘 下 来 的 时 候 才 会 触发 。 

我 们 也 用 到 了 JavaScript 的 animationeng 事件 。 择 晃 动画 播放 结束 时 才 会 触发 这 个 事件 。 
事件 触发 后 ，shake 类 会 从 按钮 上 移 除 , 这 样 会 在 用 户 下 次 输入 并 停 下 来 时 重新 添加 shake 类 ， 
并 再 次 播放 动画 。 

像 这 样 使 用 JavaScript 添加 和 移 除 类 可 能 是 最 简单 的 操作 动画 的 方式 ， 但 如 果 你 特别 熟悉 这 
门 语言 ， 还 有 一 整套 处 理 CSS 动画 的 API, 包含 暂停 、 取 消 和 逆 癌 播放 动画 的 能 力 。 要 想 了 解 更 
多 信息 ， 可 以 查看 MDN 文档 Animation。 

不 论 加 载 指 示 硕 还 是 摇晃 的 保存 按钮 ,这些 动 画 都 回 用 户 传 达 了 很 多 信息 ,而 且 不 需要 用 户 
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阅读 任何 说 明 。 它 们 都 下 接 表达 了 各 目的 含义 ,使 用 的 UI 也 不 显得 突 元 。 

我 们 在 开发 Web 应 用 程序 的 时 候 ， 应 该 经 常 思考 是 否 可 以 使 用 动画 向 用 户 提 供 有 价值 的 反 
馈 ， 即 使 是 非常 小 的 动画 。 可 能 是 在 发 送 邮 件 的 时 候 , 文本 域 可 以 飞 出 屏幕 边缘 ; 或 者 删除 草稿 
的 时 候 , 使 用 动画 可 以 让 草稿 缩小 下 至 消失 。 动画 不 需要 多 么 显眼 或 者 炫 酷 ， 只 需要 对 用 户 产 生 
回应 ， 计 他们 知道 自己 的 操作 是 在 按 预期 进行 。 

可 以 考虑 使 用 预定 义 关 键 帧 动画 集 ， 推 荐 一 个 优秀 的 网 站 : animista。 它 提供 了 非常 大 的 动 
画 库 可 供 选 择 ， 包 含 像 琳 冻 一 样 的 弹跳 、 深 动 和 摇 哆 等 效 灯 。 


16.5 ”最 后 一 点 建议 


对 很 多 Web 开发 者 来 讲 ，CSS 是 一 种 让 人 望 而 生 长 的 语言 。 它 一 脚 踩 在 设计 领域 ,为 一 肢 
踩 在 代码 世界 。CSS 语言 中 有 些 内 容 不 是 很 百 观 ,特别 是 对 于 那些 日 学 的 开发 者 。 我 希望 本 书 可 
以 帮 你 找到 一 些 门 道 。 

我 们 已 经 深入 学 习 了 这 门 语 言 中 最 基础 的 部 分 , 也 学 习 了 一 些 页 面 布局 中 容易 产生 疑惑 的 内 
容 。 其 中 泣 盖 了 很 多 话题 ， 从 如 何 组 织 CSS 使 代码 易于 维护 ， 到 最 新 的 布局 方式 。 我 们 还 尝试 
进入 设计 领域 ,构建 了 实用 且 生 动 美观 的 界面 。 

我 好 后 再 给 你 一 条 建议 ， 就 是 保持 好 奇 心 。 我 已 经 癌 你 介绍 了 CSS 工具 集 里 的 一 大 批 工具 ， 
但 这 些 工 具 可 以 组 合 和 匹配 的 方式 是 无 穷 无 尽 的 。 当 你 看 到 令 人 赞叹 的 Web 页 面 的 时 候 ， 打 开 
浏览 硕 的 开发 者 工具 , 试 着 去 弄 清楚 它 是 如 何 实现 的 。 多 多 在 线头 注 那些 制作 创意 演示 或 者 提供 
趣味 教程 的 开发 者 和 设计 师 ， 多 多 答 试 新 事物 ， 持 续 学 习 。 






























































16.6 ”上 总结 


口 使 用 关键 帧 动画 定义 动画 中 的 关键 点 。 

口 使 用 前 向 和 后 向 填充 模式 使 动画 的 开始 或 结束 无 颖 衔接 。 

口 在 恰当 的 时 间 使 用 JavaScript 触发 动画 。 

口 为 Web 页 面 添加 动画 ， 无 有 顷 华丽 炫 酷 ， 只 需 针 对 用 户 交 互 传达 正确 的 含义 。 

















选择 角 可 以 选中 页 面 上 的 特定 元 系 并 为 其 指定 样式 。CSS 有 各 种 各 样 的 选择 硼 。 


A.1 基础 选择 器 


类 型 选择 硕 或 者 标签 选择 硕 。 该 选择 天 匹配 目标 元 素 的 标签 名 。 它 的 优 抑 
级 是 0,0,1。 例 如 : pb、h1、strong。 

D .class 一 一 类 选择 硕 。 该 选择 希 匹 配 class 属性 中 有 指定 类 名 的 元 素 。 它 的 优先 级 是 0,1,0。 
例如 : .media、.nav-menu。 

口 #ig 一 一 ID 选择 疹 。 该 选择 可 匹配 拥有 指定 ID 属性 的 元 素 。 它 的 优先 级 是 1,0,0。 例 如 : 
#SIaqebpar。 


口 * 一 一 通用 选择 希 。 该 选择 大 匹配 所 有 元 素 。 它 的 优 匈 级 是 0,0,0。 











DLLagnanme 











A.2 组合 器 


组 合 胡 将 多 个 基础 选择 益 连 接 起 来 组 成 一 个 复杂 选择 带 。 例如, 在 .nav-menu 1i 选择 天 中 ， 
两 个 基础 选择 需 之 间 的 空格 被 称 作 后 代 组 合 器 〈 descendant combinator )。 它 表示 目标 元 素 <1i> 
是 一 个 拥有 nav-menu 类 的 元 系 的 后 代 。 后 代 组 合 需 是 最 稼 见 的 组 合 关 。 不 过 还 存在 其 他 几 个 组 
合 锅 ， 它 们 分 别 代 表 了 元 素 的 某 种 特定 关系 。 

口 子 组 合 器 ( >) 匹配 的 目标 元 素 是 其 他 元 素 的 直接 后 代 。 例 如 : .parent > .chilg。 

口 相 邻 兄 蜀 组 合 咒 〈+ ) 一 一 匹配 的 目标 元 素 双 跟 在 其 他 元 素 后 面 。 例 如 : p + nh2。 

口 通用 兄 蜀 组 合 器 〈 ~ ) 一 一 匹配 所 有 跟随 在 指定 元 素 之 后 的 兄 脂 元 素 。 注 意 ， 它 不 会 选中 

目标 元 素 之 前 的 兄 及 元素。 例如 : 1i.active ~ 1i。 

复合 选择 希 

多 个 基础 选择 硕 可 以 连 起 来 〈 不 使 用 空格 或 者 其 他 组 合 硕 ) 组 成 一 个 复合 ( compound ) 选 
择 硕 〈 例 如: hl.page-header )。 复 合 选择 需 选 中 的 元 系 将 匹配 其 全 部 基础 选择 融 。 例 
如 ， .dropdown.1s-active 能 够 选中 <div class=" dropdown is-active">, 但 是 无 法 选 












































中 <div class=" dropdown">。o 
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A.3 伪 类 选择 本 


伪 类 选择 从 用 于 选中 处 于 菏 个 特定 状态 的 元 素 。 这 种 状态 可 能 是 由 于 用 户 交 互 , 也 可 能 是 由 
于 元 素 相 对 于 其 父 级 或 兄 朋 元 素 的 位 置 。 伪 类 选择 硕 始终 以 一 个 冒号 〈: ) 开始 。 优 先 级 等 于 一 
个 类 选择 入 〈0,1,0 )。 
D :first-childq 一 一 匹配 的 元 素 是 其 父 元 素 的 第 一 个 子 元 素 。 
口 :last-chilg 一 一 匹配 的 元 素 是 其 父 元 系 的 最 后 一 个 子 元 素 。 
加 :only-chi1lgd 一 一 史 配 的 元 系 是 其 父 元 素 的 唯一 一 个 子 元 素 ( 没有 兄 币 元 于 2 
D :nth-child (an+p) 一 一 匹配 的 元 系 在 兄 第 元 系 中 间 有 特定 的 位 置 。 公式 an+pb 里 面 的 a 
和 b 是 整数 ， 该 公式 指定 要 选中 哪个 元 素 。 要 了 解 一 个 公式 的 工作 原理 ， 请 从 0 开始 代 
和 全 的 所 有 整数 值 。 公 式 的 计算 绪 末 指定 了 目标 元 素 的 位 置 。 下 表 给 出 了 一 些 例 子 。 
选 择 器 目标 元 素 结 果 搓 ” 述 
:nth-child(n) 0, 1,2,3,4,… 加 加 加 曾 曾 曾 曾 加 加 所 有 元 素 
:nth-child (2n) 0,2,4,6,8… 站 间 品 阐 避 间 品 剖 串 偶数 元 素 
:nth-child (3n) 0, 3, 6, 9, 12,… [器 ] 国 [j[] 国 [六 国 每 一 个 第 三 个 元 素 
:nth-child (3n+2) 2,5,8,11,14,-… 品 国 剖 避 图 则 冲 轩 | 从 第 一 个 元 素 开始 的 每 个 
第 


三 个 元 素 


Ey 


:nth-chiid(-n+4) 4,3,2,1,0,-… 加 加 加 加 [Lj[ | 前 四 个 元 素 


口 :nth-last-child (an+b) 一 一 类 似 于 :nth-chilg(), 但 不 是 从 第 一 个 元 素 往 后 数 , 而 
是 从 最 后 一 个 元 么 往 前 数 。 插 写 内 的 公式 与 :nth-chilg() 里 的 公式 的 规则 相同 。 

口 :first-of-type- 类 似 于 :first-cnhild, 但 不 是 根据 在 全 部 子 元 系 中 的 位 置 查找 元 
系 ， 而 是 根据 拥有 相同 标签 名 的 子 元 素 中 的 数字 顺序 查找 第 一 个 元 素 。 

匹配 每 种 类 型 的 最 后 一 个 子 元 素 。 

该 选择 希 匹 配 的 元 素 是 满足 该 类 型 的 唯一 一 个 子 元 系 。 




































































UD:last-of-type 








UD :only-of-type 








口 :nth-of-type (an+b) 一 一 根据 目标 元 素 在 特定 类 型 下 的 数字 顺序 以 及 特定 公式 选择 元 
素 ， 类 似 于 :nth-chilg。 
D nth-last-of-type(an+Db) 一 根据 元 素 类 型 以 及 特定 公式 选择 元 素 ， 从 其 中 最 后 一 个 


元 素 往 前 算 ， 类 似 于 :nth-last-child。 

ote es 匹配 的 元 系 不 匹配 括号 内 的 选择 需 。 括 所 内 的 选择 需 必 须 是 基 
础 选择 从 ， 它 只 能 指定 元 素 本 里， 无 法 用 于 排除 租 先 元 素 ， 同 时 不 允许 包含 为 一 个 排除 
选择 天 。 

D :empty 一 一 匹配 的 元 系 必 须 没 有 子 元 素 。 注 意 ， 如 末 元 系 包 含 空格 就 无 法 由 该 选择 带 
匹配 ,因为 空格 在 DOM 中 属于 文本 市 点 。 写 作 本 书 时 ,，W3C 正在 考虑 :blank 伪 类 选择 
条， 它 跟 :empty 的 行为 类 做， 但 是 能 选中 仅 包 含 空 格 的 元 素 ， 目 前 还 没有 浏览 硕 文 
持 :blank。 
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匹配 通过 鼠标 点 击 、 触 摸 屏幕 或 者 按 Tab 键 导航 而 获得 焦点 的 元 素 。 
匹配 鼠标 指针 正 悬 停 在 其 上 方 的 元 素 。 
口 :root 一 一 匹配 文档 根 元 素 。 对 HTML 来 说 ,这 是 <html> 元 素 , 但 是 CSS 还 可 以 应 用 到 
XML 或 者 类 似 于 XML 的 文档 上 ， 比 如 SVG。 在 这 些 情况 下 , 该 选择 器 的 选择 范围 更 广 。 
还 有 一 些 表单 域 相关 的 伪 类 选择 器 。 其 中 一 些 是 在 选择 器 Level4 版 本 的 规范 中 提出 或 者 修 
订 的 ， 因 此 在 IE10 以 及 其 他 一 些 浏览 需 中 不 受 文 持 。 请 在 Can I Use 网 站 上 查看 兼容 情况 。 
口 :qisabled 匹配 已 禁用 的 元 孙 ， 包 括 input、select 以 及 button 元 素 。 





由 Geas 





(snover 






































UD :enabled 匹配 已 启用 的 元 双 ， 即 那些 能 够 被 激活 或 者 接受 焦点 的 元 对 。 
口 : checked 匹配 已 经 针对 选 定 的 复 选 框 、 单 选 按钮 或 选择 框 选 项 。 
D :invalid- 一 根据 输入 类 型 中 的 定义 ， 匹 配 有 非法 输入 值 的 元 素 。 例 如 ， 当 <input 





type="email"> 的 人 不 是 一 个 合法 的 邮箱 地 址 时 ， 该 元 素 会 被 匹配 〈Level4 )。 
口 :valid 一 一 到 配 有 合法 值 的 元 素 ( Level4 )。 
匹配 设置 了 required 属性 的 元 素 ( Level4 )。 
匹配 没有 设置 required 属性 的 元 系 (Level4 )。 以 上 并 未 列 出 全 部 伪 类 
选择 需 。 请 参阅 MDN 文档 Pseudo-classes ， 查 看 MDN 上 的 完整 清单 。 


A.4 伪 元 素 选 择 话 


伪 元 素 类 似 于 伪 类 , 但 是 它 不 匹配 特定 状态 的 元 又, 而 是 匹配 在 文档 中 没有 和 直接 对 应 HTML 
元 素 的 特定 部 分 。 伪 元 素 选 择 天 可 能 只 匹配 元 素 的 一 部 分 ， 甚 至 回 HTML 标记 中 未 定义 的 地 方 
插入 内 容 。 
这 些 选 择 右 以 双 冒 号 ( : : ) 开头 ,尽管 大 多 数 浏览 器 也 文 持 单 冒号 的 语法 以 便 向 后 兼容 。 伪 
元 素 选择 融 的 优先 级 与 类 型 选择 表 〈 0,0,1 ) 相等 。 
DD ::before 创建 一 个 伪 元 素 ,， 使 其 成 为 匹配 元 素 的 第 一 个 子 元 素 。 该 元 素 默 认 是 行内 
元 系 ， 可 用 于 插入 文 字 、 图 片 或 其 他 形状 。 必 须 指 定 content 属性 才能 让 元 素 出 现 ， 例 
如 : .menu: :before。 
口 : :after 一 一 创建 一 个 伪 元 素 ， 使 其 成 为 匹配 元 素 的 最 后 一 个 子 元 素 。 该 元 素 默认 是 行 
内 元 素 ， 可 用 于 插 和 文字、 图 片 或 其 他 形状 。 必 须 指 定 content 属性 才能 让 元 素 出 现 ， 
例如 : .menu: :after。 
用 于 指定 匹配 元 系 的 第 一 个 文本 字符 的 样式 , 例如 : h2::first- 
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加 时 -雪人 
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用 于 指定 匹配 元 素 的 第 一 行文 本 的 样式 。 
用 于 指定 用 户 使 用 鼠标 高 亮 选择 的 任意 文本 的 样式 。 通 总 用 于 改变 选 
中 文本 的 background-colorso 只 有 少数 属性 可 以 使 用 包括 color、 background-color.、 


CUursor、 text-decorationo 





i i = 








国人 二 


A.5 属性 选择 需 


属性 选择 带 用 于 根据 HTML 属性 匹配 元 素 。 其 优先 级 与 一 个 类 选择 融 〈0,1;0 ) 相等 。 

加 和 | 匹配 的 元 素 拥 有 指定 属性 attr ， 无 论 属 性 值 是 什么 ， 例如: 
i1nput [disabledl]。 

口 [attr="value"] 一 一 匹配 的 元 系 拥 有 指定 属性 attr， 旦 属性 值 等 于 指定 的 字符 串 值 ， 
例如 : :input [type="radio"]。 

口 [attr^="value"] “开头 ”属性 选择 句 。 该 选择 需 匹 配 的 元 素 拥 有 指定 属性 attr， 
日 属性 信 的 开头 是 指定 的 字符 溃 值 ， 例 如 : a[href^="https"]。 

加 Teler') “结尾 ”属性 选择 磊 。 该 选择 右 匹 配 的 元 素 拥有 指定 属性 attt， 
晶 属 性 值 的 结尾 是 指定 的 字符 串 但， 例如 : a[href$= ".pdf"]。 

Ta “包含 ”属性 选择 磊 。 该 选择 硬 匹 配 的 元 素 拥 有 指定 属性 attr， 
旦 属性 值 包含 指定 的 字符 串 值 ， 例 如 : [class*="sprite-"]。 

回 emer “空格 分 隔 的 列表 ”属性 选择 硕 。 该 选择 天 匹 配 的 元 素 拥 有 指定 
属性 attrz， 且 属性 值 是 一 个 空格 分 隔 的 值 列 表 ， 列 表 中 的 某 个 值 等 于 指定 的 字符 串 值 ， 
例如 : a[rel="author"]。 

El [eeersTye ye 匹配 的 元 系 拥有 指定 属性 attr， 昌 属性 值 要 么 等 于 指定 的 字符 
串 信 ， 要 么 以 该 字符 串 开 头 且 紧 跟 着 一 个 连 字 符 〈- )。 适 用 于 语言 属性 ， 因 为 该 属性 有 
时 候 会 指定 一 种 语言 的 子 集 ( 比如 夺 西 哥 西 班 牙 语 ，es-MX, 或 者 普通 的 西班牙 二 ,es )， 
例如 : [lang|="es"]。 


不 区 分 大 小 写 的 属性 选择 器 

上 述 属 性 选择 各 部 是 区 分 大 小 写 的 。 选 择 益 规 郊 Level4 提出 了 一 种 不 区 分 大 小 写 的 修饰 符 ， 
可 以 作用 于 任何 属性 选择 和 硕 。 它 的 用 法 是 将 i 添加 到 结束 方 括号 前 面 ， 例 如 : input [value= 
"Ssearch"1i]。 

很 多 浏览 各 还 不 支持 该 特性 。 不 文 持 的 浏览 各 会 直接 忽略 。 因 此 ， 如 果 使 用 了 不 区 分 大 小 瑟 
修饰 符 ， 请 确保 提供 一 个 常规 的 区 分 大 小 写 的 回 退 方案 。 































































































预 处 理 希 





对 现代 CSS 工作 流 来 讲 ， 使 用 预 处 理 融 是 必 不 可 少 的 一 部 分 。 预 处 理 硕 不 仅 有 助 于 提高 代 
码 书写 效率 ， 而 且 有 助 于 维护 基础 代码 。 例 如 ， 我们 有 时 候 只 需要 写 几 行 代码 ,然后 在 整个 样式 
表 中 复 用 它 。 

预 处 理 带 的 工作 原理 是 把 我 们 写 的 源 文 件 转 详 成 输出 文件 ， 即 凋 规 CSS 样式 表 。 大 部 分 信 
况 下 ， 源 文件 看 上 去 和 常规 CSS 差不多 ， 只 是 增加 了 一 些 人 额外 的 特性 。 使 用 了 预 处 理 问 变量 的 
简单 示例 如 下 代码 刻 段 所 示 。 


Ssbrand-blue: #0086b3; 














a:link { 
Color: Sbrand-blue; 


’ 


.page-heading { 
font-size: 1.6rem; 
color: Sbrand-blue; 


} 


这 上 段 代码 片段 定义 了 一 个 名 为 Sbrand-blue 的 变量 ,用 在 了 样式 表 后 面 的 两 个 不 同 的 地 方 。 
使 用 Sass 预 处 理 硕 运行 的 时 候 ， 整 个 样式 表 中 的 变量 都 被 蔡 换 了 ， 输 出 了 下 面 的 CSS。 
a:link { 


Color: #0086b3; 
} 








.page-heading { 
font-size: 1.6rem; 
COlor: #0086b3; 

} 


我 们 知 要 明确 一 件 事 情 ， 对 浏 顺带 而 言 ， 因 为 最 终 输 出 是 常规 CSS， 所 以 预 处 理 林 不 会 问 语 
言 添加 任何 新 特性 。 但 对 作为 开发 者 的 我 们 来 讲 ， 预 处 理 带 确实 提供 了 许多 方便 。 

在 前 面 的 例子 中 , 使 用 变量 代表 颜色 值 ， 就 可 以 多 次 重复 使 用 它 ， 而 不 需要 每 次 复制 粘贴 十 
六 进 制 码 。 生 成 输出 文件 的 过 程 中 , 预 处 理 珊 答 我 们 做 了 重复 复制 这 件 事情 。 这 也 意味 春 我 们 可 
以 在 一 个 地 方 修 改变 量 值 ， 改 动 会 传递 到 整个 样式 表 。 
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预 处 理 器 有 好 几 种 ， 其 中 比较 流行 的 两 个 是 Sass 和 Less。 因 为 Sass 是 最 流行 的 预 处 理 器 ， 
所 以 在 本 附录 里 我 会 主要 介绍 它 。Less 和 Sass 类 似 ， 主 要 在 一 些 语法 细节 上 有 所 区 别 。 例 如 ， 
Sass 使 用 $ 来 表示 变量 ( $brand-blue ), 而 Less 使 用 @ 符 号 ( @brand-blue )。 本 附录 中 提 到 
的 所 有 Sass 特性 ，Less 都 支持 ， 可 以 浏览 Less 的 官方 文档 查看 语法 上 的 区 别 。 











B.1 Sass 


使 用 Sass 之 前 ， 需 要 先 确 定 几 件 事情 。 首 先是 使 用 哪 种 实现 方案 。Sass 是 用 Ruby 写 的 , 但 
为 这 种 实现 方式 在 编译 大 型 样式 表 的 时 候 比 较 慢 ， 所 以 建议 使 用 LibSass， 这 是 用 C/C++ 实现 
的 Sass 编译 融 。 

如 果 你 对 JavaScript 和 Node 环境 比较 熟悉 ， 可 以 通过 npm 包 管 理工 具 安 装 node-sass， 也 可 
以 获取 LibSass。 如 果 还 没有 安装 Node.js， 可 以 在 Node.js 网 站 上 找到 它 (免费 )， 按照 上 面 的 指 
导 进 行 下 载 安 装 即 可 。 后 面 会 介绍 相关 的 操作 命令 , 但 如 采 你 想 对 npm 了 解 更 多 ,或 者 遇 到 问题 
需要 求助 ， 可 以 访问 npm 文档 。 





B.1.1 安装 Sass 


要 安装 Sass， 先 在 终端 中 新 建 一 个 项 目 目录 ， 并 进入 该 目录 ， 然 后 运行 下 面 两 条 命令 。 
口 npm init -y 一 一 初始 化 一 个 新 的 npm 项 目 ， 创 建 package.json 文件 。 有 关 该 文件 的 更 
多 信息 ， 参 见 第 10 昔 (10.1.1 人 。 


npm install --save-dev node-sass 











安 竣 node-sass 包 ， 并 把 它 作 为 开发 依赖 
与 人 package.json。 


说 明 在 Windows 系统 中 ， 还 需要 安装 node-gyp 包 。 更 多 信息 可 以 查看 GitHub 网 站 


的 sass/node-sass 网 页 。 


第 二 个 需要 确认 的 事情 是 使 用 哪 种 语法 。Sass 文 持 两 种 语法 : Sass 和 SCSS。 它们 的 语言 特性 
一 样 ， 但 Sass 语法 去 掉 了 所 有 的 大 括号 和 分 号， 严格 使 用 缩 进来 表示 代码 结构 ， 如 下 代码 所 示 。 
body 


font-family: Helvetica, sans-serif 
Color: black 


这 有 点 类 似 于 Ruby 和 Python 这 样 的 编程 语言 ， 空 格 是 有 意义 的 。SCSS 语法 使 用 大 括号 和 
分 写 ， 因 此 看 起 来 更 像 常 规 CSS， 如 下 代码 所 示 。 


body { 
font-family: Helvetica, sans-serif; 
Color: black; 


) 
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相对 来 讲 ， 使 用 SCSS 更 普遍 一 些 。 如 果 你 不 太 确 定 ， 建 议 选择 SCSS， 我 们 在 本 附录 中 也 
是 使 用 SCSS。 


说 明 SCSS 文件 使 用 .scss 扩展 名 ，Sass 文件 使 用 .sass 扩展 名 。 


B.1.2 ”运行 Sass 


现在 已 经 安装 好 了 Sass, 我 们 开始 创建 样式 表 , 在 项 目 日 录 新 建 两 个 子 文件 夹 , 分 别 叫 作 sass 
和 build。 我 们 会 把 源 文件 放 在 sass 文件 夹 ，Sass 会 使 用 这 些 文件 来 生成 CSS 文件 ， 并 放 到 build 
文件 夹 。 接 下 来 ， 编 辑 package.json 文件 。 按 照 代 码 清单 B-1 修改 scripts 人 口 。 


代码 清单 B-1 为 package.json 添加 一 条 sass 命令 
"Scripts": { 
"sass": "sass sass/index.scss build/styles.css" 


} [A 


这 样 就 定义 了 一 条 sass 命令 , 运行 的 时 候 会 把 sass/index.scss 编译 成 build/styles.css 这 个 新 
文件 。 目 前 项 目 中 还 不 存在 sass/index.scss 文件 ， 先 创建 它 ，Sass 源码 会 放 在 这 里 面 。 运 行 npm 
run sass， 执 行 这 条 命令 ， 就 会 生成 〈 或 者 覆盖 ) build/styles.css 样式 表 。 


提示 像 Grunt、Gulp 和 Webpack 这 些 和 常见 的 任务 构建 工具 ， 会 有 一 些 可 以 使 用 的 播 
件 ， 比 如 gulp-sass。 如 果 你 想 使 用 插件 ， 可 以 找 一 款 Sass 或 者 Less 的 ， 集 成 到 自己 最 
熟悉 的 工作 流 中 。 











B.1.3 ”理解 Sass 的 核心 特性 


前 面 已 经 展示 过 Sass 变量 的 例子 了 (sbrandq-blue )。 把 代码 清单 B-2 中 的 代码 添加 到 
index.scss 文件 中 ， 看 看 Sass 是 如 何 编 译 的 。 


代码 清单 B-2 ”Sass 释 量 


Ssbrand-blue: #0086b3; | 定义 变量 
a:link { 
color: Sbrand-blue; SE 使 用 变量 


’ 


.bage-heading { 
font-size: 1.6rem; 
color: Sbrand-blue; 


) 
运行 npm run sass， 可 以 把 上 面 的 代码 编 详 成 CSS。 输 出 文件 ( build/styles.css ) 如 下 所 示 。 
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a:link { 
Color: #0086b3; } 


.Page-heading f{ 
font-size: 1.6rem; 
COlor: #0086b3; } 


/*# sourceMappingURL=styles.css.map */ 


变量 已 经 被 蔡 换 为 十 六 进 制 颜色 值 ， 浏 响 带 现在 可 以 直接 运行 了 。 同 时 Sass 还 生成 了 一 个 
源 映射 文件 ， 并 添加 了 一 条 注释 到 样式 表 的 的 部 ， 来 标明 源 映射 ( source map ) 的 路 径 。 











源 映 射 一 一 个 特殊 文件 ， 计 算 机 可 以 用 它 来 追踪 生成 后 的 代码 (在 我 们 这 里 是 
CSS ) 中 每 一 行 对 应 的 源 代码 中 的 那 一 行 ( Sass )。 这 个 映射 文件 可 以 用 在 一 些 调 


试 器 中 ， 和 包括 浏览 器 的 开发 者 工具 。 














你 可 能 注意 到 编译 后 的 代码 没有 被 很 好 地 格式 化 , 闭合 大 括号 带 到 了 上 一 行 ， 有 时 候 空 行 也 
可 能 会 删除 。 这 些 都 没关系 ， 因 为 浏览 器 不 会 关心 这 些 空格 。 我 会 把 本 附录 里 接 下 来 的 例子 中 的 
代码 格式 处 理 好 ， 这 样 结构 清晰 更 易于 理解 。 

1. 行内 计算 

Sass 同样 支持 使 用 +、-、*、/ 和 %( 除法 取 整 ) 进行 行内 计算 。 这 样 我 们 就 可 以 从 一 个 初始 
值 获得 多 个 值 ， 如 代码 清单 B-3 所 示 。 
代码 清单 B-3 ”使 用 行内 计算 


Spadding-left: 3em; 





.note-author { 使 用 变量 


left-padding: Spadding-left; 
font-weight: bold; 
} 


.note-body . 变量 乘 以 2 
left-padding: Spadding-left * 2:; 


) 
使 用 npm run sass 编译 源码 ， 生 成 了 下 面 的 输出 。 


.note-author { 
left-padding: 3em; 
font-weight: lbold; 

} 


.note-body { 
left-padding: 6em; 
} 
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2. 岩 套 选择 比 








这 个 特性 在 两 个 值 相关 但 不 同 的 时 候 特别 有 用 。 在 本 例 中 ， 无 论 Sspadding-left 的 值 是 多 
，note-body 的 左 侧 内 边 距 总 是 note-author 的 两 倍 。 
所 示 。 


代码 清单 B-4 ” 骸 套 选择 器 


.Site-nav { 


Sass 允许 在 代码 块 内 骨 套 选择 副 。 你 可 以 使 用 艇 套 把 有 关联 的 代码 分 到 一 组 ， 如 代码 清单 B-4 


display: flex; 
; 藤 套 选择 器 
肥 
margin-top: 0; 


&.is-active { 


display: block; 
} 


We 
} 
} 
ZN 





外 层 选择 器 的 位 置 
Sass 会 把 外 层 声明 块 的 选择 天 与 般 套 选择 融合 并 。 示 例 代 三 编 译 为 如 下 所 示 。 
.Site-nav { 
display: flex; 
} 
.Site-nav > 11 { 
margin-top: 
} 


0; 


.Site-nav > li.is-active f{ 
font-weight: 
} 


bold; 


默认 情况 下 ， 外 层 的 .site-nav 选择 天 会 日 动 添加 到 编 详 代码 的 每 个 选择 需 前 
位 置 还 会 插入 一 个 空格 。 要 修改 默认 操作 ， 可 以 使 用 & 符 写 代 表 外 层 选 择 硕 想 要 插入 的 位 置 。 
警告 识 套 会 提高 最 终生 成 的 选择 器 

过 深 。 


俯 前 而 ， 拼 接 的 
所 未 。 





的 优先 级 ,使 用 话 套 的 时 候 要 小 心 ， 避 免 诺 套 层 级 


代码 清单 B-5 骸 套 媒体 查询 
html { 





也 可 以 在 声明 块 内 骸 套 媒体 查询 ,这 样 可 以 用 来 避免 重复 书写 相同 的 选择 絮 ， 如 代码 清单 B-5 

font-size: lrem; 

声明 块 内 的 

Gmeaqla (min-width: 45em) { 
font-size: 1.25rem; 


媒体 查询 
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} 
} 


这 段 代 码 编译 成 了 如 下 。 


html { 
font-size: lrem; 


} 





@Qmedia (min-width: 45em) { 
html { 
font-size: 1.25rem; 
} 
} 


这 样 的 话 ， 如 采 你 要 修改 选择 顶 ， 就 不 必 再 去 媒体 香 询 里 面 修 改 对 应 的 选择 名 了 。 


3. 局 部 文件 〈@IMPORT ) 

局 部 文件 可 以 允许 你 把 样式 分 割 成 多 个 独立 的 文件 , Sass 会 把 这 些 文件 拼接 在 一 起 生成 一 个 
文件 。 使 用 局 部 文件 可 以 按照 自己 的 想法 随意 组 织 文 件 , 但 最 终 只 提供 给 浏览 融 一 个 文件 ,这 样 
可 以 减少 网 络 请 求 的 数量 。 

在 项 目 中 新 建 sass/button.scss 文件 ， 添 加 代码 清单 B-6 中 的 样式 到 文件 中 。 


代码 清单 B-6 按钮 局 部 样式 表 
.button { 
padding: lem 1.25em; 
background-color: #265559; 
Color: #333; 
} 


然后 在 index.scss 中 使 用 @import 规则 引入 这 个 局 部 样式 表 ， 写 法 如 代码 清单 B-7 所 示 。 
代码 清单 B-7 引入 局 部 文件 


@import "button"; < 一 一 一 一 局 部 文件 的 路 径 

运行 Sass 的 时 候 ， 局 部 文件 会 被 编 详 ， 然 后 插入 到 eimport 规则 指定 的 地 方 。 

我 认为 这 是 预 处 理 豆 最 重要 的 特性 。 随 肴 样式 表 越 来 越 大 , 深 动 上 干 行 代码 去 寻找 样式 表 中 
相关 的 部 分 变 得 非常 困难 。 使 用 这 个 特性 可 以 把 样式 表 打 散 ， 变 成 一 系列 小 巧 的 模块 ， 同 时 又 不 
会 造成 网 络 性 能 下 降 。 想 要 了 解 更 多 ， 可 以 碍 看 第 9 章 的 附加 栏 “ 预 处 理 肯 和 模块 化 CSS 。 


4. 混入 

混入 ( mixin ) 是 一 小 段 CSS 代码 块 ， 可 以 在 样式 表 任 意 地 方 复 用 。 如 果 有 一 段 特 定 的 字体 
样式 需要 在 多 个 地 方 使 用 ， 或 者 类 似 于 清除 浮动 这 样 疝 用 的 重复 规则 ( 4.2 节 讨 论 过 )， 使 用 混和 人 
就 比较 合适 。 

混入 使 用 emixin 规则 来 定义 , 使 用 eincluae 规则 来 调用 。 这 里 有 个 清除 浮动 的 混入 示例 ， 
如 代码 清单 B-8 所 示 。 
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代码 清单 B-8 ”清除 浮动 混入 


@Qmixin clearfix { 定义 一 个 混入 
& : “OP OLS { 命名 为 clearfix 
display: table; 
Content: 
} 苦 套 选择 器 


tk::after { 
clear: both; 


.media { 调用 混入 
Qinclude clearfix; 


background-color: #eee; 


) 
预 处 理 顺 会 提取 mixin 中 的 代码 , 替换 到 eincluae 规则 所 在 的 位 置 。 最 终 的 代码 如 下 所 示 。 


.media f{ 
background-color: #eee; 

} 

.media: :before f{ 
display: table; 
CONCEenc: 


.media: :after { 
clear: both; 
} 


注意 ， 最 终 编 译 生 成 的 代码 中 没有 了 clearfix。 混 入 的 内 容 只 会 添加 到 样式 表 中 用 到 了 它 的 
地 方 。 

你 还 可 以 定义 币 参 数 的 混入 ， 束 像 平时 编程 中 使 用 的 咀 数 一 样 。 代 码 清单 B-9 展示 的 混入 ， 
定义 了 一 个 警告 框 。 其 中 有 两 个 参数 Scolor 和 $pg-color, 它们 是 混入 的 作用 域内 定义 的 变量 。 


代码 清单 B-9 ”市 参数 的 混入 











QQmixin alert-variant (Scolor, Sbg-color) { 定义 一 个 包含 两 个 
padding: 0.3em 0.5em; 参数 的 混入 
border: lpx solid Scolor; EE 

参数 变量 可 以 在 
SOLlDL :SELoOr: 混入 中 使 用 
background-color: Sbg-color; > 





.dalert-info f{ 
Qinclude alert-variant (blue, lightblue) 


把 值 传 到 

浊 

LErt=0ander. 4 竟 入 中 
Qinclude alert-variant (red, pink) 


} 
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每 次 调用 混入 , 部 可 以 传递 不 同 的 值 。 这 些 值 指定 为 对 应 的 两 个 变量 。 


输出 的 CSS 如 下 。 


.alert-info { 
padding: 0.3em 0.5em; 
border: lpx solid blue; 
color: blue; 
background-color: lightblue; 
} 


.alert-danger { 
padding: 0.3em 0.5em; 
border: lpx solid red; 
COolor: red; 
background-color: pink; 
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上 面 的 这 段 代码 最 终 


混和 人 又 一 次 实现 了 复 用 同一 段 代 码 , 但 在 这 种 情况 下 ， 最 终生 成 了 两 个 不 同 的 版 本 。 生 成 的 





代码 不 同 ， 是 因为 传递 的 参数 值 不 一 样 。 


警告 ” 过去， 混入 特性 经 常用 来 为 某 些 CSS 属性 混入 带 前 


的 写法 。 例如，border- 


radius 混入 可 能 代表 -webkit-border-radius、-moz-border-radius 和 pborder- 
radius 三 个 属性 。 我 不 大 建议 你 这 么 使 用 混入 特性 ， 可 以 考虑 使 用 Autoprefixer 来 代 
替 ( 想 了 解 更 多 内 容 ， 可 以 查看 本 附录 后 面 的 “PostCSS” 部 分 )。 


5. 扩展 


sass 还 支持 Gextend 规则 。 这 和 mixin 类 似 ， 但 编译 方式 有 所 不 同 。 对 于 扩展 ，sass 不 会 多 
次 复制 相同 的 声明 ， 而 是 把 选择 需 组 合 在 一 起 , 这样 它们 就 会 包含 同样 的 规则 。 最 好 还 是 通过 示 
例 来 演示 。 在 代码 清单 B-10 中 ，.message 包含 的 规则 被 扩展 到 另外 两 个 规则 集中 。 


代码 清单 B-10 ”扩展 基础 类 
.message { 

padding: 0.3em 0.5em; 

border-radius: 0.5em; 


} 





.message-info { 
Qextend .message; 
color: blue; 
background-color: lightblue; 
} 


.message-danger { 
Qextend .message; 
CoOolor: red; 
background-color: pink; 


; 
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上 面 的 代码 会 生成 如 下 输出 。 


.message, 

.message-info, 

.message-danger { 
padding: 0.3em 0.5em; 
border-radius: 0.5em; 


} 





.message-info { 
Color: blue; 
background-color: lightblue; 
} 


.message-danger { 
Color: red; 
background-color: pink; 


’ 


注意 ，Sass 复制 了 .message-info 和 .message-danger 选择 希 , 并 上 移 到 第 一 个 规则 集 。 
这 样 做 的 好 处 是 标记 只 需要 引用 A 无 须 两 个 都 引入 ， 从 <div class="message 
message-info"> 变 成 了 <div class="message-info">。 因为 现在 message-1info ey 
含 message 类 中 所 有 的 样式 ， 所 以 再 引入 message 类 就 变 得 多 余 。 


警告 eextend 不 同 于 mixin， 它 会 把 选择 器 移动 到 样式 表 中 更 靠 前 的 位 置 。 这 就 意味 
着 我 们 写 的 源码 的 最 终 顺 序 可 能 跟 预 期 不 完全 相同 ， 这 就 会 影响 样式 登 加 的 效果 。 











eextend 的 输出 长 度 通 常会 比 mixin 短 一 些 。 这 是 显而易见 的 ， 也 很 容易 想到 @extend 更 
好 一 些 ， 因 为 它 最 终 输 出 的 样式 表 更 小 ( 因此 网 络 传 输 速度 更 快 ), 但 也 要 知道 mixin 产生 的 大 
量 重 复 代 码 ， 使 用 gzip 可 以 压缩 得 比较 小 。 只 要 你 的 服务 需 使 用 gzip 压缩 处 理 过 所 有 的 网 络 传 
输 ( 当然 ， 也 应 该 这 么 做 )， 增 加 的 这 些 重 复 代 人 码 通 常会 比 预 期 小 得 多 。 

但 也 不 要 为 了 性 能 优化 就 完全 放弃 mixin， 只 用 eextend。 要 考虑 代码 的 组 织 方 式 ， 有 具体 问 
题 具 体 分 析 ， 看 看 mixin 和 extend 哪 种 更 合适 。 通 常情 况 下 ， 你 可 能 更 倾向 于 使 用 mixin， 只 有 
当 需 要 减少 HIML 中 填写 的 类 名 数量 的 时 候 才 考虑 使 用 eextend， 如 代码 清单 B-10 所 示 。 


6. 颜色 处 理 
Sass 还 有 个 不 错 的 特性 ， 它 有 一 堆 处 理 颜 色 的 图 数 。 如 末 你 震 要 两 个 同类 的 颜色 〈 比 如 ， 同 
一 种 绿色 的 较 浅 和 较 深 版 本 )， 可 以 使 用 代码 清单 B-11 中 的 函数 来 生成 。 


代码 清单 B-11 Sass 颜色 男 数 


Sgreen: #63a35c; 

















加 深 10% 
Sgreen-dark: darken(S$green, 10%); We 
Sgreen-light: lighten(S$Sgreen, 10%$); -| 减 淡 10% 
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Sgreen-vivid: saturate (Sgreen, 20%);} 整 饱 和 度 
Sgreen-dull: desaturate(S$green, 20%); 

Spurple: adjust-hue(sgreen, 180deg); | 在 色相 环 上 
Syellow: adjust-hue(s$sgreen, -70deg); 旋转 颜色 
Sgreen-transparent: xdbal(S$Sgreen，0.5) ) 二 一 调整 透明 度 





通过 这 些 函 数 ,你 可 以 实现 修改 一 个 变量 ， 同 时 修改 相关 联 的 其 他 颜色 信 。 这 样 就 不 必 把 所 
有 颜色 都 存 到 变量 中 ， 可 以 在 需要 的 属性 中 直接 修改 ， 如 下 代码 所 示 。 
.bage-header { 
Color: Sgreen; 


background-color: lighten(Sgreen, 50%); 
} 


如 果 需 要 实现 更 多 高 级 操作 ， 还 有 一 些 其 他 的 颜色 函数 ， 可 以 参考 这 篇 文章 : 4 Visual Guide 


to Sass & Compass Color Functions, 











7. 循环 

针对 某 个 值 使 用 循环 , 可 以 生成 一 系列 细小 的 变化 , 在 第 15 草 中 , 我 们 使 用 了 几 个 :nth-child1() 

选择 侣 来 匹配 连续 到 的 亲 单 元 素 ， 然后 为 每 个 元 率 添 加 不 同 的 transition-delay ( 如 代码 清 
单 15-10 所 示 )。 这 类 代码 可 以 更 简单 地 通过 Sass 循环 来 实现 , 用 到 了 efor 规则 , 如 代码 清单 B-12 
所 示 。 


代码 清单 B-12 ”迭代 一 组 值 








从 2 到 4 迭代 
$index 值 在 选择 器 中 


Qfor Sindex from 2 to 5 { 


用 变量 
.nav-links > li:nth-child(#{S$index}) { 使 用 变量 
1 1 。 大 1 2 。 
transition-delay: (0.1s Ssindex) 0.1gs; 变量 乘 以 一 
个 时 间 值 


上 





这 样 就 把 相同 的 代码 块 输出 了 好 几 次 ， 每 次 变量 $ingdex 的 值 都 会 增加 。 我 们 在 选择 需 中 使 
用 了 该 变量 ,是 通过 #1{} 注 释 来 输出 的 。 最 终 代码 如 下 所 示 。 
.nav-links > li:nth-child(2) { 


transition-delay: 0.1s; 


上 





.nav-links > li:nth-child(3) { 
transition-delay: 0.2s; 


} 
.nav-links > li:nth-child(4) { 


transition-delay: 0.3s; 


} 


在 原生 CSS 中 ， 修 改 这 种 模式 的 代码 比较 麻烦 。 如 果 我 要 把 过 渡 延 述 改 成 每 次 增加 0.15s， 
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就 需要 分 别 手 动 把 每 个 声明 改 成 0.15s、0.3s 和 0.4$$s。 如 果 我 想 再 添加 一 个 重复 动作 ， 就 需要 手 
动 复制 代码 块 并 修改 所 有 值 。 现 在 有 了 Sass 循环 ， 要 做 修改 ， 只 需要 编辑 数学 公式 或 者 修改 迭 
代 次 数 。 


8. 它 还 是 CSS 
预 处 理 需 不 会 修改 CSS 的 基本 原理 。 我 在 整 本 书 中 讲 到 的 内 容 ， 依 然 全 部 适用 。 之 所 以 没 
贯穿 全 书 使 用 Sass, 是 因为 我 希望 书 中 所 有 话题 讲解 的 都 是 这 门 语言 本 里 的 知识 要 点 ,而 不 是 
任何 一 球 预 处 理 硕 。 即 使 你 要 使 用 Sass， 也 依然 需要 深入 理解 CSS, 但 Sass (或 者 Less ) 可 以 完 
成 原生 CSS 中 绝 大 部 分 比较 耗 时 的 工作 。Sass 是 一 个 非常 有 用 的 工具 ， 建 议 你 学 会 熟练 使 用 和 它 。 




















B.2 PostCSS 


PostCSS 是 为 一 种 类 型 的 预 处 理 右 。 它 编译 源 文件 并 输出 一 个 处 理 过 的 CSS 文件 ,这 一 点 上 
和 Sass 或 者 Less 一 样 ， 但 PostCSS 是 完全 依靠 插件 工作 的 。 如 果 没 有 安装 插件 ， 输 出 文件 就 是 
没有 任何 变化 的 源 文件 副本 。 

你 能 用 PostCSS 实现 什么 功能 ,完全 取决 于 你 使 用 哪些 插件 。 你 可 以 使 用 多 个 插件 ,提供 和 
Sass 一 样 的 功能 ; 也 可 以 只 用 一 两 个 插件 , 同时 使 用 Sass 和 PostCSS 运行 代码 。 如 果 有 需要 ,你 
甚至 可 以 用 JavaScript 编写 自己 的 插件 。 

有 一 点 很 重要 ，PostCSS 运行 插件 是 有 顺序 的 。 如 采 你 配置 了 多 个 插件 ， 它 们 的 执行 顺序 有 
时 候 影 响 很 大 , 可 能 需要 反复 试验 才能 使 PostCSS 实现 想 要 的 工作 方式 。 具 体 的 配置 方法 可 以 查 
看 PostCSS 文档 。 

说 明 PostCSS 最 开始 是 指 发 布 处 理 器 ， 因 为 它 通常 在 预 处 理 器 之 后 运行 。PostCSS 已 

经 脱离 之 前 那个 特定 的 工作 阶段 , 但 相对 于 所 有 工具 可 以 提供 的 功能 范围 来 说 ， 它 是 有 

一 些 局 限 的 。 




















B.2.1 使 用 Autoprefixer 


PostCSS 中 最 重要 的 插件 可 能 就 是 Autoprefixer 了 。 这 个 插件 可 以 将 相关 的 所 有 浏览 器 前 绥 
都 添加 到 CSS 中 。 想 要 了 人 解 更 多 有 关 浏 览 絮 前 缀 的 信息 ， 参 见 第 5 章 的 附加 栏 “ 浏 览 絮 前 级 ”。 
如 果 你 的 源 代码 如 下 所 示 。 


.example { 











display: flex; 
titONS 各 41 O58 
background: linear-gradient (to bottom, white, black).; 


} 
Autoprefixer 就 会 深 加 额 外 的 声明 ， 为 旧版 浏览 带 提 供 币 前 级 的 回 退 写法 ， 输 出 如 下 代码 。 


.example { 








display: -webkit-box; 
display: -ms-flexbox; 
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display: flex; 

-webkit-transition: all .5s; 

transition: all .5s; 

background: -webkit-gradient (linear, left top, left bottom, from(white), 
to(black)); 

background: linear-gradient (to bottom, white, black).; 


} 


如 有 果 你 要 目 己 手写 所 有 的 浏览 妖 前 级 , 既 耗 时 又 容易 出 错 。 同 时 源码 中 会 增加 大 量 的 无 意义 
代码 ， 因 为 不 需要 过 多 关注 这 些 市 浏 览 希 前缀 的 CSS 如 何 运行 。 

你 可 以 为 Autoprefixer 配置 想 要 支持 的 浏览 冀 列 表 ， 如 果 有 需要 ， 它 束 会 自动 添加 浏览 大 前 
缀 来 文 持 这 些 浏览 絮 。 例 如 ， 使 用 数组 ["ie >= 10",， "1last 2"] 配 置 Autoprefixer， 可 以 确保 
你 的 代码 兼容 ( 如果 可 行 的 话 ) IE10 及 以 上 版 本 ， 以 及 其 他 所 有 浏览 需 最 新 的 两 个 版 本 。 
Autoprefixer 使 用 Can IUse 数据 库 中 的 最 新 数据 来 确定 什么 时 候 需 要 添加 前 级 。 

在 这 里 强烈 建议 你 哪怕 不 用 任何 其 他 PostCSS 插件 ， 也 要 用 Autoprefixer。 本 书 所 有 的 代码 
示例 都 没有 包含 浏览 需 前 级 ， 就 是 因为 我 已 经 假定 你 会 使 用 Autoprefixer 来 做 这 件 事情 。 











B.2.2 使 用 cssnext 


cssnext 是 男 一 蒜 非 常 流 行 的 PostCSS 插件 (也 可 以 称 之 为 一 组 插件 )。 这 球 插 件 希 望 模拟 那 
还 没有 受 所 有 浏览 硕 文 持 的 最 新 的 CSS 语法 (有 一 些 还 没有 在 CSS 规范 中 最 终 确 认 ), 为 实现 
些 CSS 特性 使 用 了 很 多 方法 ， 比 如 polyfill 等 。 

这 于 插件 里 的 很 多 特性 有 点 像 Sass 提供 的 功能 ， 比 如 瞬 套 选择 顺 、 使 用 eaapply 规则 实现 类 
似 于 mixin 的 行为 、 颜 色 处 理 郧 数 等 。cssnext 中 同样 也 包含 Autoprefixer。 在 cssnext 网 站 点 击 Features 
链接 即 可 获取 插件 特性 的 完整 列表 。 

我 们 需要 知道 这 些 特性 中 的 一 部 分 仍然 处 在 W3C 人 研发 的 早期 阶段 ， 在 最 终 定 下 来 之 前 ， 几 
乎 可 以 确定 会 做 一 些 修 改 。 如 采 你 想 体验 这 些 新 兴 的 CSS 特性 ， 可 以 使 用 cssnext 插件 ， 但 是 我 
不 建议 你 将 其 作为 唯一 的 预 处 理 需 规则 。 随 春 浏 览 融 为 一 些 cssnext 特性 添加 原生 文 持 ， 从 使 用 
PostCSS 处 理 这 些 特性 过 渡 到 使 用 浏览 需 原 生 实现 ， 可 能 会 比较 困难 。 有 个 好 办 法 是 把 预 处 理 需 
规则 从 兼容 规则 中 分 离 出 去 。 








此 
这 














B.2.3 使 用 cssnano 


cssnano 是 基于 PostCSS 的 压缩 工具 。 压 缩 工 具 ( minifier ) 可 以 从 代码 中 剥离 所 有 无 关 的 空 
格 ， 使 代码 体积 尽 可 能 变 小 ， 但 同时 依然 保持 相同 的 语法 含义 。 

说 明 ”压缩 工具 不 能 代替 gzip 压缩 ，gzip 是 需要 服务 器 来 提供 的 。 一 般 来 说 ， 最 好 是 

对 CSS 同时 使 用 体积 压缩 和 gzip 压缩 ， 这 样 可 以 减少 网 络 加 载 时 间 。 

CSS 压缩 工具 有 很 多 种 , 但 将 其 作为 PostCSS 构建 过 程 中 的 一 部 分 ， 而 非 单独 的 步 台 ,显然 
更 有 意义 。cssnano 可 以 让 你 这 么 做 。 
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B.2.4 使 用 PreCSS 


PreCSS 是 一 蒜 PostCSS 插件 包 ， 提 供 了 一 些 类 似 于 Sass 的 特性 ， 其 中 包含 了 $ 变 量 、 行 内 计 
算 、 循 环 和 混入 等 。 

如 果 你 感觉 同时 使 用 Sass 和 PostCSS 预 处 理 需 运行 代码 效率 不 高 ， 可 以 考虑 使 用 PostCSS 
的 PreCSS 插件 包 来 代替 Sass。PreCSS 和 Sass 不 完全 相同 ,如 条 选择 这 种 蔡 代 方案 ,你 就 需要 碍 
阅 PreCSS 的 文档 。 这 是 个 相对 较 新 的 工具 ， 可 能 不 如 Sass 稳定 。 
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